更新记录

1.0.0（2026-02-02） 下载此版本

Features

• 初始版本发布
• 支持手写签名功能
• 支持自定义画笔颜色和粗细
• 支持水印功能（可自定义水印文本）
• 支持自动上传功能
• 支持自定义工具栏
• 兼容 H5、App、微信小程序、支付宝小程序等多端平台
• 提供完整的事件回调和方法调用

平台兼容性

uni-app(4.84)

其他

mt-signature 手写签名组件

uni-app 手写签名组件，支持多平台（H5、App、小程序），提供丰富的功能和高度的可定制性。

功能特性

• ✅ 多平台支持（H5、App、微信小程序、支付宝小程序等）
• ✅ 手写签名绘制（触摸/鼠标）
• ✅ 平滑笔迹（贝塞尔曲线）
• ✅ 撤销功能
• ✅ 防误触（最小笔画长度）
• ✅ 自定义工具栏位置（顶部/底部/左侧/右侧）
• ✅ 水印支持（自动生成用户名+时间）
• ✅ 水印自适应横竖屏
• ✅ 自定义水印样式（颜色、大小、旋转角度）
• ✅ 自动上传
• ✅ 插槽支持（自定义工具栏）
• ✅ 丰富的事件回调

安装

将 mt-signature 文件夹复制到项目的 uni_modules 目录下。

基础用法

<template>
  <view class="page">
    <mt-signature 
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />
  </view>
</template>

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

<style>
.page {
  width: 100vw;
  height: 100vh;
}
</style>

Props 属性

画布配置

笔迹优化

工具栏配置

水印配置

导出配置

上传配置

Events 事件

Methods 方法

通过 ref 调用组件方法：

<mt-signature ref="signature" />

Slots 插槽

使用示例

1. 基础签名

<mt-signature 
  height="500rpx"
  @confirm="handleConfirm"
/>

2. 带水印签名

<mt-signature 
  :show-watermark="true"
  watermark="张三 | 2024-01-01 12:00:00"
  @confirm="handleConfirm"
/>

3. 自动上传

<mt-signature 
  :auto-upload="true"
  upload-url="https://api.example.com/upload"
  :upload-header="{ Authorization: 'Bearer token' }"
  @success="handleSuccess"
/>

4. 平滑笔迹 + 撤销功能

<template>
  <view class="page">
    <mt-signature 
      ref="signature"
      :smooth-stroke="true"
      :max-undo-steps="10"
      :show-confirm-btn="false"
    >
      <template #toolbar-right>
        <button @click="handleUndo">撤销</button>
        <button @click="handleClear">清空</button>
        <button @click="handleConfirm">确认</button>
      </template>
    </mt-signature>
  </view>
</template>

<script>
export default {
  methods: {
    handleUndo() {
      this.$refs.signature.undo();
    },
    handleClear() {
      this.$refs.signature.clear();
    },
    handleConfirm() {
      // 手动触发确认逻辑
    }
  }
}
</script>

5. 防误触

<mt-signature 
  :min-stroke-length="10"
  @confirm="handleConfirm"
/>

6. 自定义工具栏位置

<!-- 底部工具栏 -->
<mt-signature toolbar-position="bottom" />

<!-- 左侧工具栏 -->
<mt-signature toolbar-position="left" />

<!-- 右侧工具栏 -->
<mt-signature toolbar-position="right" />

7. 自定义水印样式

<mt-signature 
  :show-watermark="true"
  watermark-color="rgba(255, 0, 0, 0.3)"
  :watermark-font-size="24"
  :watermark-rotate="-30"
  @confirm="handleConfirm"
/>

8. 完整示例

<template>
  <view class="signature-page">
    <mt-signature 
      ref="signature"
      height="100%"
      pen-color="#1890ff"
      :pen-width="4"
      :smooth-stroke="true"
      :max-undo-steps="10"
      :min-stroke-length="5"
      :show-watermark="true"
      toolbar-position="bottom"
      :auto-upload="true"
      upload-url="https://api.example.com/upload"
      :upload-header="uploadHeader"
      @ready="handleReady"
      @confirm="handleConfirm"
      @error="handleError"
    >
      <template #toolbar-center>
        <button @click="handleUndo" :disabled="!canUndo">撤销</button>
      </template>
    </mt-signature>
  </view>
</template>

<script>
export default {
  data() {
    return {
      canUndo: false,
      uploadHeader: {
        Authorization: 'Bearer ' + uni.getStorageSync('token')
      }
    };
  },
  methods: {
    handleReady() {
      console.log('画布已就绪');
    },
    handleUndo() {
      this.$refs.signature.undo();
    },
    handleConfirm(result) {
      console.log('签名完成', result);
      if (result.uploadResult) {
        console.log('上传成功', result.uploadResult);
      }
    },
    handleError(error) {
      console.error('错误', error);
      uni.showToast({
        title: error.message,
        icon: 'none'
      });
    }
  }
};
</script>

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

兼容性

平台支持

Vue 版本支持

• Vue 2.x: ✅ 完全支持
• Vue 3.x: ✅ 完全支持（已适配生命周期）

功能兼容性说明

1. 基础绘制功能

• 所有平台均支持
• H5 平台额外支持鼠标绘制

2. 水印功能

• 所有平台均支持
• 水印会自动根据横竖屏调整密度
• 支持自定义水印样式（颜色、大小、旋转角度）

3. 撤销功能

• H5 和 App 平台完全支持
• 小程序平台支持但有限制：
  • 每次撤销需要重新绘制图片，可能有性能开销
  • 建议设置较小的 maxUndoSteps（如 3-5 步）
  • 频繁撤销可能导致卡顿

4. 平滑笔迹

• 所有平台均支持
• 使用二次贝塞尔曲线实现
• 移动端可能有轻微性能影响，建议根据实际情况开启

5. 自动上传

• 所有平台均支持
• 需要配置 uploadUrl
• 小程序需要在后台配置合法域名

注意事项

通用注意事项

1. 组件尺寸：组件需要明确的宽高才能正常工作
2. 水印自适应：水印会自动根据横竖屏调整密度
3. 性能优化：
   • 撤销功能会占用内存，建议设置合理的 maxUndoSteps
   • 平滑笔迹会略微增加性能开销，移动端建议谨慎使用
4. 上传配置：自动上传需要配置 uploadUrl

小程序特殊注意事项

1. 撤销功能限制：

   • 小程序的撤销功能基于 canvasToTempFilePath 和 drawImage
   • 频繁撤销可能导致性能问题
   • 建议 maxUndoSteps 不超过 5

2. 上传域名配置：

   • 需要在小程序后台配置 uploadUrl 为合法域名
   • 开发时可以在开发者工具中勾选"不校验合法域名"

3. Canvas 限制：

   • 部分小程序对 canvas 尺寸有限制
   • 建议画布尺寸不要过大（宽高不超过 4096px）

H5 特殊说明

1. 鼠标支持：H5 平台同时支持触摸和鼠标绘制
2. 跨域问题：如果使用水印功能，确保图片资源不跨域

Vue 版本兼容

组件同时支持 Vue 2 和 Vue 3：

• 使用 beforeDestroy（Vue 2）和 beforeUnmount（Vue 3）双生命周期
• 避免使用 Vue 3 专有 API
• canvasId 生成使用时间戳而非 _uid

测试建议

建议在以下环境进行测试：

1. H5 浏览器：Chrome、Safari、Firefox
2. 微信小程序：真机测试（开发者工具可能表现不一致）
3. App：iOS 和 Android 真机测试
4. 其他小程序：根据目标平台进行真机测试

已知问题

1. 小程序撤销性能：小程序平台的撤销功能可能有性能问题，建议限制撤销步数
2. 部分小程序水印字体：某些小程序平台可能不支持自定义字体，会使用系统默认字体

更新日志

v1.0.0

• 初始版本发布
• 支持基础签名功能
• 支持水印
• 支持自动上传
• 支持平滑笔迹
• 支持撤销功能
• 支持防误触
• 支持自定义工具栏位置 签名组件

一个功能完善、兼容多端的手写签名组件，支持水印、自动上传等功能。

平台兼容性

安装

方式一：通过 uni_modules 安装（推荐）

在 HBuilderX 中右键 uni_modules 目录，选择 从插件市场导入插件，搜索 mt-signature 安装。

方式二：手动导入

将 mt-signature 文件夹复制到项目的 uni_modules 目录下。

基础用法

<template>
  <view>
    <mt-signature
      @confirm="onConfirm"
      @cancel="onCancel"
    />
  </view>
</template>

<script>
export default {
  methods: {
    onConfirm(result) {
      console.log('签名完成', result.tempFilePath);
    },
    onCancel() {
      console.log('取消签名');
    }
  }
}
</script>

带水印

<template>
  <mt-signature
    :show-watermark="true"
    watermark="张三 | 2024-01-30 10:30:00"
    @confirm="onConfirm"
  />
</template>

自动上传

<template>
  <mt-signature
    :auto-upload="true"
    upload-url="https://your-api.com/upload"
    :upload-header="{ Authorization: 'Bearer token' }"
    @confirm="onConfirm"
  />
</template>

<script>
export default {
  methods: {
    onConfirm(result) {
      console.log('上传结果', result.uploadResult);
    }
  }
}
</script>

自定义样式

<template>
  <mt-signature
    width="100%"
    height="500rpx"
    background-color="#f5f5f5"
    pen-color="#ff0000"
    :pen-width="5"
    placeholder="请在此处签名"
  />
</template>

自定义工具栏

<template>
  <mt-signature>
    <template #toolbar-left>
      <button @click="handleBack">返回</button>
    </template>
    <template #toolbar-center>
      <text>请签名</text>
    </template>
    <template #toolbar-right>
      <button @click="handleSave">保存</button>
    </template>
  </mt-signature>
</template>

Props

Events

Slots

Methods

通过 ref 调用组件方法：

<template>
  <mt-signature ref="signature" />
</template>

<script>
export default {
  methods: {
    // 清空签名
    clearSignature() {
      this.$refs.signature.clear();
    },
    // 判断是否为空
    checkEmpty() {
      const isEmpty = this.$refs.signature.isEmpty();
      console.log('是否为空', isEmpty);
    }
  }
}
</script>

注意事项

1. 小程序平台：需要在 manifest.json 中配置 canvas 权限
2. H5平台：建议在移动端使用，PC端可能存在兼容性问题
3. App平台：如需横屏显示，请在页面中单独处理屏幕方向
4. 水印功能：水印仅在导出图片时添加，不影响签字体验
5. 上传功能：需要配置正确的上传接口和请求头

完整示例

参考 pages/signature/index.vue 页面的实现。

更新日志

1.0.0 (2024-01-30)

• 初始版本发布
• 支持基础签名功能
• 支持水印功能
• 支持自动上传
• 兼容多端平台