@npm_lx/signature-pad-for-vue3

一个基于signature_pad的签名板Vue3组件，支持自定义样式和多种导出格式，简单易用，可用于用户签名、合同签名等场景，可随时更换背景图片。

安装

``bash
npm install @npm_lx/signature-pad-for-vue3
`

组件预览


需要你到本项目github上面clone项目，然后在项目根目录下执行以下命令，才能预览组件运行效果
`bash
pnpm install
pnpm run dev
`

基本使用

`vue



`

配置项

| 参数名 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| penMinWidth | Number | 2 | 笔画的最小宽度 |
| penMaxWidth | Number | 2 | 笔画的最大宽度 |
| penColor | String | '#000000' | 笔画的颜色 |
| backgroundColor | String | '#F3F3F4' | 画板的背景颜色 |
| bgImageUrl | String | '' | 背景图片的URL（用于回显签名） |
| watermark | Object | {} | 水印配置参数，默认值见水印配置 |

默认水印参数


当你想加水印的时候，记得text需要传字符串才会打开水印，否则text值为空是不加水印的
`javascript
{
// 水印文本
text: '',
// 字体大小
fontSize: 20,
// 行高
lineHeight: 24,
// 字体
fontFamily: 'Arial',
// 字重
fontWeight: 'bold',
// 字体颜色
color: 'rgba(0, 0, 0, 0.1)',
// 旋转角度
rotate: -45,
// 水印起始x坐标
x: 100,
// 水印起始y坐标
y: 100,
// 当重复水印的时候，水印之间的距离 x y
textDistanceX: 0,
textDistanceY: 0,
// 是否在整个画布上重复水印
repeat: true,
}
``

方法

| 方法名 | 参数 | 返回值 | 描述 |
| --- | --- | --- | --- |
| clear | isClearBg: Boolean (默认: false) | 无 | 清空画板，isClearBg为true时同时清除背景图片 |
| getBase64Data | format: String (默认: 'png'), quality: Number (默认: 0.95) | String | 获取签名的Base64数据 |
| getImageFile | format: String (默认: 'png'), quality: Number (默认: 0.95) | 无 | 导出签名为图片文件 |
| setBgImage | url: String | 无 | 设置背景图片 |
| isCanvasEmpty | 无 | Boolean | 检查画板是否为空 |

事件

| 事件名 | 说明 |
| --- | --- |
| beginStroke | 开始签名时触发 |
| endStroke | 结束签名时触发 |

注意事项

1. 组件需要一个有固定宽高的容器来显示
2. 使用ref来调用组件的方法
3. 使用背景图片需要来源支持跨域设置
4. 导出的图片格式支持png、jpg等常见格式