SignaturePad 签名板

基于 signature_pad 库封装的 Canvas 签名面板，支持 v-model 双向绑定、多种操作按钮布局（layout）、撤销/重做（undo/redo）和多种保存格式（png/jpeg/svg）。

---

基础用法

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

<TSignaturePad v-model="signature" />

---

自定义颜色与尺寸

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

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

---

禁用状态

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

<TSignaturePad disabled />

---

笔画粗细

通过 TSlider 范围滑块同时控制最小/最大线宽。

<TSlider v-model="range" :min="0.5" :max="10" :step="0.5" range />
<TSignaturePad :min-width="range[0]" :max-width="range[1]" />

---

撤销 / 重做

通过 ref 调用 undo() / redo() 方法撤销或重做笔画，hasUndo / hasRedo 控制按钮禁用态。

<TSignaturePad ref="padRef">
  <template #footer>
    <button :disabled="!padRef?.hasUndo" @click="padRef?.undo()">撤销</button>
    <button :disabled="!padRef?.hasRedo" @click="padRef?.redo()">重做</button>
    <button @click="padRef?.clear()">清空</button>
  </template>
</TSignaturePad>

---

自定义布局

通过 :layout 属性控制底部操作按钮的组合。默认 ['ok','res']（确认 + 重签），可选 'undo'（撤销）、'redo'（恢复）、'width'（笔画粗细滑块）。

<TSignaturePad :layout="['ok','res','undo','redo','width']" />

---

保存格式

通过 save-format 控制确认时输出的图片格式，支持 'png'（默认）、'jpeg'、'svg'。

<TSignaturePad save-format="svg" @confirm="handleConfirm" />

---

自定义底部插槽

通过 #footer 插槽完全自定义底部操作区域。配合 expose 的方法（clear、undo、redo）和 emit 事件（@confirm、@end-stroke）实现完整自定义交互。

此处仅展示自定义底部操作区域，实际使用中请自行实现签名保存等对应逻辑。

<TSignaturePad ref="padRef" @confirm="onConfirm">
  <template #footer>
    <!-- 集成滑块控制笔画粗细 -->
    <TSlider v-model="range" :min="0.5" :max="6" :step="0.5" range />
    <!-- 调用 expose 方法 -->
    <button @click="padRef?.undo()">撤销</button>
    <button @click="padRef?.clear()">重签</button>
  </template>
</TSignaturePad>

---

API

Props

属性	类型	默认值	说明
model-value / v-model	string	''	签名结果的 DataURL
width	number | string	'100%'	Canvas 宽度（传数字为 px，传字符串为 CSS 值，如 '100%'）
height	number | string	200	Canvas 高度（传数字为 px，传字符串为 CSS 值）
pen-color	string	'#000000'	笔迹颜色
background-color	string	'rgba(0,0,0,0)'	背景色
min-width	number	0.5	最小线宽
max-width	number	2.5	最大线宽
throttle	number	16	节流毫秒数
disabled	boolean	false	禁用签名
save-format	'png' | 'jpeg' | 'svg'	'png'	确认时输出的图片格式
confirm-text	string	'确认'	确认按钮文案
layout	('ok'|'res'|'undo'|'redo'|'width')[]	['ok','res']	底部操作栏布局项

Emits

事件	参数	说明
update:model-value	dataURL: string | null	v-model 更新
confirm	dataURL: string	用户确认签名
clear	—	用户清空签名
end-stroke	isEmpty: boolean	每笔绘制结束，传出是否为空

Expose

方法	说明
isEmpty()	签名是否为空
toDataURL(type?, encoderOptions?)	获取签名 DataURL
toSVG()	获取签名 SVG 字符串
fromDataURL(dataURL)	从 DataURL 加载签名
clear()	清空签名
undo()	撤销上一笔
redo()	重做被撤销的笔画
hasUndo	是否可撤销（ref 响应式）
hasRedo	是否可重做（ref 响应式）

Slots

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