更新记录

1.0.1（2025-12-17） 下载此版本

测试了微信小程序支持

1.0.0（2025-12-17） 下载此版本

发布 ikun-signature 组件，支持签名绘制、撤销、清空、保存及 Base64 导出。

平台兼容性

uni-app(3.6.15)

uni-app x(3.6.15)

ikun-signature 电子签名组件

组件概述

• 类型：可视化电子签名组件
• 用途：提供手写签名、撤销、清空、保存等基础能力，适用于业务签批、表单签署等场景。

支持平台

• H5
• App (App-Plus)
• 微信小程序

快速使用

<template>
  <view class="container">
    <ikun-signature
      ref="signature"
      :canvas-width="300"
      :canvas-height="200"
      :default-pen-color="'#000000'"
      :default-pen-size="3"
      :show-watermark="true"
      :watermark-text="'电子签名'"
      @save="onSaveSignature"
    />
  </view>
</template>

<script>
export default {
  methods: {
    // 监听保存事件
    onSaveSignature(base64Image) {
      console.log('签名Base64:', base64Image)

      // NEXT: 可以上传到服务器或保存到本地
    }
  }
}
</script>

属性参数

事件说明

实例方法

通过 ref 获取组件实例后可调用以下方法：

注意事项

• 画布尺寸：组件初始化时会根据外层容器宽度进行一次适配，如需固定宽度可通过外层容器控制。
• 撤销策略：每次完成笔画都会自动入栈，可连续撤销至空白画布。
• 平台差异：导出 Base64 在不同平台底层实现不同，已针对 H5、App-Plus、微信小程序处理，无需额外配置。
• 水印与辅助线：水印和辅助线仅为视觉提示，不会出现在导出的签名图片中。

常见问题

• Q：如何判断用户是否已经签名？
  A：组件内部维护 hasSignature 状态，可通过监听 save 事件或调用实例方法后结合业务逻辑判断。

• Q：如何在自定义按钮上触发保存？
  A：通过 ref 调用 saveAsBase64()，成功后会自动触发 save 事件。

更新日志

• v1.0.0：发布 ikun-signature 组件，支持签名绘制、撤销、清空、保存及 Base64 导出。