Signature 签名
用于签名场景的组件,基于 Canvas 实现。
基础用法
当点击确认按钮时,组件会触发 submit 事件,事件的第一个参数为 data,包含以下字段:
image:签名对应的图片,为 base64 字符串格式。若签名为空,则返回空字符串。canvas:Canvas 元素。
自定义颜色
通过 lineColor 来自定义笔触颜色。
自定义线宽
通过 lineWidth 来自定义线条宽度。
自定义背景颜色
通过 backgroundColor 来自定义背景颜色。
TIP
若保存的图片格式为 image/jpeg ,则不支持不保留背景色,默认为黑色
API
属性
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| backgroundColor | 画板背景色,不支持颜色名称(如:black) | string | - | - |
| lineColor | 画笔线条颜色,不支持颜色名称(如:black) | string | - | #000 |
| lineWidth | 画笔线条宽度 | number | [1, 32] 范围内的整数 | 3 |
| reserveBackgroundColor | 保存时是否保留背景色,jpeg 格式不支持 | boolean | - | true |
| pictureFormat | 保存图片的格式 | string | image/png / image/jpeg / image/webp | image/png |
| clear | 清除按钮文案 | string | - | 清空 |
| confirm | 确认按钮文案 | string | - | 确认 |
事件
| 事件名 | 说明 | 参数 |
|---|---|---|
| start | 开始签名时触发 | - |
| end | 结束签名时触发 | - |
| submit | 点击确定按钮时触发 | data: { image: string; canvas: HTMLCanvasElement } |
| clear | 点击取消按钮时触发 | - |