更新记录

1.0.0（2026-03-17） 下载此版本

手写签名板组件，支持横屏签名、自定义样式、导出 base64 图片。

平台兼容性

其他

uni-signature-board

手写签名板组件，支持横屏签名、自定义样式、导出 base64 图片。

插件路径

uni_modules/uni-signature-board/
├── components/
│   └── uni-signature-board/
│       └── uni-signature-board.vue
├── package.json
├── readme.md
├── CHANGELOG.md
└── uni.scss

功能特性

• ✅ 横屏手写签名
• ✅ 导出 base64 图片
• ✅ 自定义线条颜色、粗细
• ✅ 自定义按钮样式
• ✅ 支持水印提示
• ✅ 动态缩放适配不同屏幕
• ✅ 支持 Vue2/Vue3
• ✅ 无第三方依赖

快速使用

<template>
  <view style="width: 100vw; height: 100vh;">
    <uni-signature-board @confirm="handleConfirm" @cancel="handleCancel" />
  </view>
</template>

<script>
import UniSignatureBoard from '@/uni_modules/uni-signature-board/components/uni-signature-board/uni-signature-board.vue';

export default {
  components: { UniSignatureBoard },
  methods: {
    handleConfirm(result) {
      console.log('签名 base64:', result.tempFilePath);
    },
    handleCancel() {
      console.log('取消签名');
    }
  }
};
</script>

Props 参数

Events 事件

完整示例

1. 基础用法

<template>
  <view class="container">
    <view class="signature-wrapper">
      <uni-signature-board @confirm="onConfirm" @cancel="onCancel" />
    </view>
  </view>
</template>

<script>
import UniSignatureBoard from '@/uni_modules/uni-signature-board/components/uni-signature-board/uni-signature-board.vue';

export default {
  components: { UniSignatureBoard },
  methods: {
    onConfirm(e) {
      console.log('签名结果:', e.tempFilePath);
      // e.tempFilePath 是 base64 格式的图片
    },
    onCancel() {
      console.log('取消签名');
    }
  }
};
</script>

<style>
.signature-wrapper {
  width: 100vw;
  height: 100vh;
}
</style>

2. 在弹窗中使用

<template>
  <view>
    <button @click="openSignature">打开签名板</button>

    <uni-popup ref="popup" type="center">
      <view class="popup-wrapper">
        <uni-signature-board 
          v-if="showBoard"
          @cancel="closePopup" 
          @confirm="handleConfirm" 
        />
      </view>
    </uni-popup>
  </view>
</template>

<script>
import UniSignatureBoard from '@/uni_modules/uni-signature-board/components/uni-signature-board/uni-signature-board.vue';

export default {
  components: { UniSignatureBoard },
  data() {
    return {
      showBoard: false
    };
  },
  methods: {
    openSignature() {
      this.showBoard = true;
      this.$refs.popup.open();
    },
    closePopup() {
      this.$refs.popup.close();
      this.showBoard = false;
    },
    handleConfirm(result) {
      console.log('签名完成:', result.tempFilePath);
      this.closePopup();
    }
  }
};
</script>

<style>
.popup-wrapper {
  width: 90vw;
  height: 70vh;
}
</style>

3. 自定义样式

<template>
  <view class="signature-wrapper">
    <uni-signature-board
      :lineWidth="5"
      lineColor="#FF0000"
      bgColor="#FFFFFF"
      :rotateAngle="180"
      watermark="请在此签名"
      cancelText="放弃"
      resetText="清除"
      confirmText="完成"
      primaryColor="#007AFF"
      @confirm="onConfirm"
    />
  </view>
</template>

<script>
import UniSignatureBoard from '@/uni_modules/uni-signature-board/components/uni-signature-board/uni-signature-board.vue';

export default {
  components: { UniSignatureBoard },
  methods: {
    onConfirm(e) {
      // 获取签名图片
      const base64 = e.tempFilePath;
      console.log('签名 base64:', base64);
    }
  }
};
</script>

4. 上传签名到服务器

<script>
import UniSignatureBoard from '@/uni_modules/uni-signature-board/components/uni-signature-board/uni-signature-board.vue';

export default {
  components: { UniSignatureBoard },
  methods: {
    onConfirm(e) {
      const signatureBase64 = e.tempFilePath;

      // 方式1: 直接传 base64 给后端
      uni.request({
        url: 'https://your-api.com/signature/upload',
        method: 'POST',
        data: {
          signature: signatureBase64
        },
        success: (res) => {
          console.log('上传成功:', res.data);
        }
      });

      // 方式2: 转换为临时文件路径（App端）
      // #ifdef APP-PLUS
      const tempPath = this.base64ToTempFilePath(signatureBase64);
      uni.uploadFile({
        url: 'https://your-api.com/upload',
        filePath: tempPath,
        name: 'file',
        success: (res) => {
          console.log('上传成功');
        }
      });
      // #endif
    },

    base64ToTempFilePath(base64) {
      const filePath = uni.env.USER_DATA_PATH + '/signature.png';
      const buffer = uni.base64ToArrayBuffer(base64.replace('data:image/png;base64,', ''));
      const fs = uni.getFileSystemManager();
      fs.writeFileSync(filePath, buffer, 'binary');
      return filePath;
    }
  }
};
</script>

平台兼容性

更新日志

1.0.0 (2026-03-16)

• 首次发布
• 支持横屏手写签名
• 支持导出 base64 图片
• 支持自定义线条颜色、粗细
• 支持自定义按钮样式和水印
• 动态缩放适配不同屏幕
• 支持 Vue2/Vue3
• 无第三方依赖