更新记录

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]
});

📷 示例截图

![](C:\Users\Administrator\Pictures\Screenshots\屏幕截图 2025-07-08 150343.png)


隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问