Signature 电子签名

轻量无界的 Canvas 手写电子签名画板控件，去除了繁复的外框卡片，支持移动端 Touch 触摸与 PC 端鼠标流畅书写、撤销、清空与 PNG 图片导出。

---

代码示例

1. 极简电子签名 (Clean Canvas)

设置 showActions (默认 true) 显示右下角轻量浮动悬浮按钮。点击“完成签名”自动触发 @confirm 导出 PNG 临时图片。

<template>
  <mu-signature height="380rpx" @confirm="handleConfirm" />
  
  <img v-if="sigImg" :src="sigImg" alt="签名导出预览" />
</template>

<script setup>
import { ref } from 'vue'
const sigImg = ref('')

const handleConfirm = (res) => {
  sigImg.value = res.tempFilePath
}
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
height	画板的高度 (rpx)	Number | String	-	380
penColor	画笔颜色	String	-	'#0F172A'
penWidth	画笔粗细	Number	-	4
bgColor	画板背景颜色	String	-	'#FFFFFF'
showActions	是否显示右下角悬浮快捷按钮 (撤销/清空/完成)	Boolean	true | false	true

---

事件说明 (Events)

事件名	说明	回调参数
confirm	点击"完成签名"导出图片成功时触发	({ tempFilePath })
clear	点击"清空"重置画板时触发	-
undo	点击"撤销"上一步笔画时触发	-
start	开始在画板上书写时触发	(event: TouchEvent)
end	每一笔画结束抬手时触发	(event: TouchEvent)

---

实例方法 (Expose Methods)

方法名	说明
handleClear()	以编程方式清空画板内容
handleUndo()	以编程方式撤销上一步笔画
isEmpty()	判断画板是否为空（返回 boolean）