更新记录

1.0.0（2025-07-08） 下载此版本

目前只支持最基础的清空、撤销、保存功能

平台兼容性

uni-app(4.66)

其他

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 参数

📡 事件说明

🖱️ 功能说明

• ✏️ 支持手写签名
• 🔄 撤销上一步操作
• ❌ 清空画布
• 💾 保存签名为临时图片（支持预览）

📱 平台兼容

📌 注意事项

• 若同时使用多个签名组件，请确保每个 canvas-id 唯一。
• 若需要横竖屏适配，组件已内置 uni.onWindowResize 监听。
• App 端建议开启 renderjs 支持以提升性能（需 HBuilderX 高版本编译）。

🧩 内部方法（可扩展）

🧪 示例效果

保存成功后返回 tempFilePath 可用于预览或上传：

this.$refs.signature.save(); // 可手动调用保存

uni.previewImage({
  urls: [tempFilePath]
});

📷 示例截图