更新记录
1.0.0(2025-07-08)
下载此版本
目前只支持最基础的清空、撤销、保存功能
平台兼容性
uni-app(4.66)
Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
√ |
- |
√ |
- |
√ |
- |
√ |
√ |
- |
微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
√ |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
其他
Signature Pad ✍️
基于 uni-app
封装的签名组件,支持触摸签名、撤销、清空、保存图片等功能,适用于微信小程序、App、H5 等多端平台。
📦 安装使用
<template>
<view class="container">
<signature-pad
:width="canvasWidth"
:height="canvasHeight"
:line-width="2"
stroke-style="#000"
@save="handleSave"
/>
</view>
</template>
<script>
export default {
data() {
return {
canvasWidth: 300,
canvasHeight: 150
};
},
methods: {
handleSave(tempFilePath) {
uni.previewImage({
urls: [tempFilePath]
});
}
}
};
</script>
<style>
.container {
padding: 20px;
display: flex;
justify-content: center;
}
</style>
⚙️ Props 参数
参数名 |
类型 |
默认值 |
描述 |
width |
Number,String |
300 |
画布宽度(单位 px) |
height |
Number,String |
150 |
画布高度(单位 px) |
lineWidth |
Number |
2 |
画笔粗细 |
strokeStyle |
String |
#000000 |
画笔颜色 |
📡 事件说明
事件名 |
描述 |
参数 |
save |
点击“保存”时触发 |
tempFilePath: String 图片临时路径 |
🖱️ 功能说明
- ✏️ 支持手写签名
- 🔄 撤销上一步操作
- ❌ 清空画布
- 💾 保存签名为临时图片(支持预览)
📱 平台兼容
平台 |
支持情况 |
H5 |
✅ 支持 |
微信小程序 |
✅ 支持 |
App (iOS/Android) |
✅ 支持 |
📌 注意事项
- 若同时使用多个签名组件,请确保每个
canvas-id
唯一。
- 若需要横竖屏适配,组件已内置
uni.onWindowResize
监听。
- App 端建议开启
renderjs
支持以提升性能(需 HBuilderX 高版本编译)。
🧩 内部方法(可扩展)
方法名 |
描述 |
clearCanvas() |
清空当前签名内容 |
undo() |
撤销上一步操作 |
save() |
手动触发保存 |
🧪 示例效果
保存成功后返回 tempFilePath
可用于预览或上传:
this.$refs.signature.save(); // 可手动调用保存
uni.previewImage({
urls: [tempFilePath]
});
📷 示例截图
