SignaturePad 手写签名板

基于 Canvas 的手写签名绘制组件。支持高 DPI 屏幕、响应式尺寸、签名导出为 PNG 并上传服务器。使用 PointerEvent 实现，同时支持鼠标和触摸输入。

• 基础用法
• Props
• Events
• Exposed Methods
• 工作流程
• 注意事项

基础用法

<template>
  <SignaturePad
    v-model="signatureFileId"
    business-type="flow_signature"
    :business-id="taskId"
    @uploaded="handleUploaded"
  />

  <n-button @click="clearSignature">清空重签</n-button>
</template>

<script setup>
import { ref } from 'vue'
import SignaturePad from '@/components/flow/SignaturePad.vue'

const signatureFileId = ref('')
const signPadRef = ref(null)
const taskId = ref('123')

function handleUploaded(data) {
  console.log('签名上传成功', data)
}

function clearSignature() {
  signPadRef.value?.clear()
}
</script>

Props

属性	类型	默认值	说明
modelValue	String	''	签名图片的 fileId（v-model 绑定）。有值时显示已签名状态
businessType	String	'flow_signature'	上传业务类型标识
businessId	String	''	上传业务 ID
storageType	String	''	存储类型
height	Number	180	画布高度（px）
disabled	Boolean	false	是否禁用绘制（只读查看模式）
strokeWidth	Number	2.6	笔画宽度

Events

事件名	参数	说明
update:modelValue	(fileId: string)	签名 fileId 变化
uploaded	(response)	签名上传成功后触发
clear	—	签名被清空后触发

Exposed Methods

通过 ref 获取组件实例后调用：

方法	返回值	说明
clear()	—	清空签名画布，重置 modelValue
exportBlob()	Promise<Blob>	导出签名为 PNG Blob
hasSignature()	Boolean	检查画布上是否有签名内容
upload()	Promise<string>	上传签名到服务器，返回 fileId

工作流程

1. 用户在画布上绘制签名
2. 绘制完成后调用 upload() 将签名导出为 PNG 并上传到文件服务器
3. 上传成功后 modelValue 更新为返回的 fileId，uploaded 事件触发
4. 提交表单时将 fileId 发送给后端

注意事项

• 使用 2x DPI 缩放确保 Retina 屏幕清晰度
• height 参数仅在初始化时生效，后续修改需重新挂载
• 已上传签名后画布变为只读预览模式
• strokeWidth=2.6 为经过验证的适中笔画粗细