更新记录

1.0.0（2026-01-05） 下载此版本

新增

• 初始版本发布
• 基础手写签名功能
• 支持 H5、微信/支付宝/百度/字节跳动/QQ 小程序、App 多端
• 支持 Vue2 和 Vue3 双版本
• 压感模式，模拟真实笔锋效果
• 撤销/重做功能，支持配置历史记录长度
• 丰富的配置项：画笔颜色、粗细、背景色等
• 支持导出 PNG/JPG 图片
• 支持自定义背景色和背景图片
• 支持横屏签名模式
• 支持占位提示文字
• 支持工具栏位置配置（顶部/底部）
• 支持自定义样式
• 完整的事件回调
• 支持通过 ref 调用组件方法

平台兼容性

uni-app(3.6.15)

w-signature 手写签名板

一个功能丰富的 UniApp 手写签名板组件，支持多端、Vue2/Vue3 兼容。

特性

• 多端兼容：H5、微信/支付宝/百度/字节跳动/QQ 小程序、App
• Vue2/Vue3 双版本支持
• 压感模式，模拟真实笔锋效果
• 撤销/重做功能
• 丰富的配置项
• 支持导出图片
• 支持自定义背景色/背景图
• 支持横屏签名模式

安装

将插件导入到 uni_modules 目录下即可自动注册组件。

基本用法

<template>
  <w-signature
    ref="signatureRef"
    :height="300"
    @save="onSave"
  />
</template>

<script>
export default {
  methods: {
    onSave(result) {
      console.log('签名图片路径：', result.tempFilePath)
    }
  }
}
</script>

Props 属性

Events 事件

Methods 方法

通过 ref 调用组件方法：

this.$refs.signatureRef.save()

使用示例

压感模式（笔锋效果）

<w-signature
  :pressure="true"
  :minWidth="1"
  :maxWidth="8"
  :openSmooth="true"
  :smoothness="0.7"
/>

自定义工具栏

<w-signature
  ref="signature"
  :showToolbar="false"
/>
<button @click="$refs.signature.clear()">清除</button>
<button @click="$refs.signature.save()">保存</button>

获取 Base64 数据

const base64 = await this.$refs.signature.getImageData()

平台兼容性

License

MIT