vue-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 + 移动端（鼠标 & 触摸），支持自定义线条颜色和粗细。

✨ Features

• 📐 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)

📦 Installation

npm install @vue/vue-esignature
# or
yarn add @vue/vue-esignature
# or
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 尺寸（不会清除内容）