一个基于[signature_pad](https://github.com/szimek/signature_pad)的签名板Vue3组件,支持自定义样式和多种导出格式,简单易用,可用于用户签名、合同签名等场景,可随时更换背景图片。
npm install @npm_lx/signature-pad-for-vue3一个基于signature_pad的签名板Vue3组件,支持自定义样式和多种导出格式,简单易用,可用于用户签名、合同签名等场景,可随时更换背景图片。
``bash`
npm install @npm_lx/signature-pad-for-vue3
bash
pnpm install
pnpm run dev
`基本使用
`vue
ref="signaturePadRef"
:penMinWidth="2"
:penMaxWidth="5"
:penColor="'#000000'"
:backgroundColor="'#F3F3F4'"
@beginStroke="handleBeginStroke"
@endStroke="handleEndStroke"
/>
`配置项
| 参数名 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| 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等常见格式