更新记录

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

多端支持：兼容 H5、微信小程序、App 等主流平台。 横竖屏切换：内置横屏模式，自动旋转坐标系，适合全屏签名场景。 笔画流畅：使用二次贝塞尔曲线连接点，笔迹圆润平滑。 功能丰富：支持撤销（Undo）、重写（Clear）、生成图片（Save）。 自定义样式：可配置笔触颜色、大小、背景色等。

平台兼容性

uni-app(3.6.15)

其他

x-signature 手写签名板

基于 uni-app 的手写签名组件，支持多端（H5、小程序、App），支持横屏/竖屏切换、撤销、清空、生成 Base64 图片等功能。

功能特点

• 多端支持：兼容 H5、微信小程序、App 等主流平台。
• 横竖屏切换：内置横屏模式，自动旋转坐标系，适合全屏签名场景。
• 笔画流畅：使用二次贝塞尔曲线连接点，笔迹圆润平滑。
• 功能丰富：支持撤销（Undo）、重写（Clear）、生成图片（Save）。
• 自定义样式：可配置笔触颜色、大小、背景色等。

引入方式

<script>
import xSignature from '@/components/x-signature/x-signature.vue';

export default {
  components: {
    xSignature
  }
}
</script>

基本用法

<template>
  <view>
    <x-signature
      ref="signature"
      width="100%"
      height="300px"
      penColor="black"
      :penSize="4"
    ></x-signature>

    <button @click="clear">重写</button>
    <button @click="undo">撤销</button>
    <button @click="save">保存</button>
  </view>
</template>

<script>
export default {
  methods: {
    clear() {
      this.$refs.signature.clear();
    },
    undo() {
      this.$refs.signature.undo();
    },
    async save() {
      try {
        const res = await this.$refs.signature.save();
        console.log('保存路径:', res.tempFilePath);
        console.log('Base64:', res.base64);
      } catch (e) {
        console.error('保存失败:', e.message);
      }
    }
  }
}
</script>

API

Props 属性

Methods 方法

通过 ref 调用组件方法：

Events 事件

注意事项

1. 横屏模式 (landscape)：

   • 当设置 orientation="landscape" 时，组件会自动变为 fixed 定位，全屏覆盖，并旋转 90 度。
   • 请确保父容器允许全屏遮罩。
   • 横屏模式下，坐标系会自动映射，无需手动处理。

2. 生成图片：

   • save() 方法返回的 base64 数据在不同端（App/H5/小程序）已做兼容处理。
   • 若签名为空，save() 会抛出 Error: Signature is empty。

3. App 端权限：

   • App 端保存图片可能需要文件读写权限，请在 manifest.json 中配置。