A simple responsive signature pad component for Vue 3. The canvas automatically fits its container.
npm install vue3-esignature一款基于vue3 + typescript的签名插件
A simple, responsive signature pad component for Vue 3.
The canvas automatically fills its parent container – the container decides the size, the component just fits.
> 容器多大，签名区域就多大。支持 PC + 移动端（鼠标 & 触摸），支持自定义线条颜色和粗细。
---
- 📐 Auto-fit container – the component itself has no fixed width/height
- 📱 PC & mobile friendly – supports both mouse and touch events
- 🖊️ Configurable pen color & line width
- 🧼 Simple API – clear, exportImage, resize
- 🧩 TypeScript support out of the box (.d.ts included)
---
``bash
npm install @vue/vue-esignatureor
yarn add @vue/vue-esignatureor
pnpm add @vue/vue-esignature
在 main.ts` 中注册插件：
// 引入组件库
import VueSignature from 'vue3-esignature'
// 全局注册组件
app.use(VueSignature)
// 也支持在组件中按需引入
import { VueSignature } from 'vue3-esignature'
// 组件支持属性
Prop Type Default Description
penColor string #000000 画笔颜色
lineWidth number 2 画笔粗细（线宽，单位 px）
backgroundColor string #ffffff 画布背景色，清空时会重绘此颜色
Method Description
clear() 清空画布，并按当前 backgroundColor 重绘背景
exportImage(type?, quality?) 导出当前签名为 Base64 图片字符串，默认 image/png
resize() 根据父容器尺寸和 devicePixelRatio 重新计算 canvas 尺寸（不会清除内容）