Skip to content

SignaturePad 签名板

基于 signature_pad 库封装的 Canvas 签名板板,支持 v-model 双向绑定和清空/确认操作。


基础用法

在面板上绘制签名后点击确认获取 Base64 DataURL。

vue

<TSignaturePad v-model="signature" />

自定义颜色与尺寸

通过 pen-color:width:height 自定义笔迹颜色和画布尺寸。

vue

<TSignaturePad pen-color="#0ca678" :width="300" :height="150" />
<TSignaturePad pen-color="#d63939" :width="300" :height="150" />

禁用状态

设置 disabled 禁止绘制,适合查看已签署的签名。

vue

<TSignaturePad disabled />

API

Props

属性类型默认值说明
model-value / v-modelstring''签名结果的 DataURL
widthnumber400Canvas 宽度
heightnumber200Canvas 高度
pen-colorstring'#000000'笔迹颜色
background-colorstring'#ffffff'背景色
min-widthnumber0.5最小线宽
max-widthnumber2.5最大线宽
throttlenumber16节流毫秒数
disabledbooleanfalse禁用签名
clear-textstring'清空'清空按钮文案
confirm-textstring'确认'确认按钮文案

Emits

事件参数说明
update:model-valuedataURL: string | nullv-model 更新
confirmdataURL: string用户确认签名
clear用户清空签名

Expose

方法说明
isEmpty()签名是否为空
toDataURL(type?, encoderOptions?)获取签名 DataURL
fromDataURL(dataURL)从 DataURL 加载签名
clear()清空签名

Slots

插槽说明
footer自定义底部操作按钮区