更新记录

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

新增

• 基于 uni-app x Composition API + UTS 实现的跨平台手写签名组件
• 支持 App (Android/iOS/HarmonyOS)、Web (H5)、微信小程序
• 手写签名绘制（触摸轨迹跟随）
• 画笔颜色 / 粗细可配置
• 画布背景色 / 边框色可配置
• 清空重写功能
• 签名预览功能
• 导出签名图片（base64 / tempFilePath）
• 90° 旋转导出功能（可选）
• 高清屏（DPR）自动适配
• Props + Emits 组件通信
• defineExpose 暴露方法（clear / toDataURL / toTempFilePath / isEmpty / getContext）
• 内置工具栏（重写 / 预览 / 完成），可通过 showToolbar prop 控制显隐

平台兼容性

uni-app(5.0)

uni-app x(3.99)

其他

jack-signature 手写签名组件

跨平台手写签名组件，支持 App (Android/iOS/HarmonyOS)、Web (H5) 和微信小程序，使用 uni-app x Composition API + UTS 开发。

功能特性

• 手写签名绘制
• 画笔颜色 / 粗细可配置
• 画布背景色 / 边框色可配置
• 竖排 / 横排（工具栏左置 + 按钮旋转 90°）双布局
• 清空重写
• 签名预览
• 导出签名图片（base64 / tempFilePath）
• 90° 旋转导出（可选）
• 支持通过 Props/Emits 与父组件通信
• 支持通过 ref 调用暴露方法
• 高清屏（DPR）适配

平台兼容性

属性 Props

事件 Events

暴露方法 defineExpose

通过 ref 调用以下方法：

使用示例

基础用法（竖排）

<template>
  <view class="page">
    <jack-signature
      ref="sigRef"
      height="400px"
      @confirm="handleConfirm"
      @clear="handleClear"
    />
  </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const sigRef = ref()

function handleConfirm(data: { base64: string, tempFilePath: string }) {
  console.log('签名 base64:', data.base64)
  // 上传到服务器或本地保存
}

function handleClear() {
  console.log('画布已清空')
}
</script>

横排模式（工具栏左置 + 按钮旋转）

<jack-signature
  ref="sigRef"
  height="400px"
  direction="row"
  penColor="#1A1A1A"
  :penWidth="3"
  @confirm="handleConfirm"
/>

自定义画笔 + 旋转导出

<jack-signature
  ref="sigRef"
  penColor="#FF0000"
  :penWidth="5"
  backgroundColor="#F5F5F5"
  :rotateExport="true"
  @confirm="handleConfirm"
/>

隐藏内置工具栏 + 外部按钮控制

<template>
  <jack-signature
    ref="sigRef"
    height="400px"
    :showToolbar="false"
  />
  <view class="btn-row">
    <button @click="sigRef?.clear()">重写</button>
    <button @click="doExport">导出</button>
  </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const sigRef = ref()

function doExport() {
  const base64 = sigRef.value?.toDataURL()
  if (base64 != null && base64.length > 0) {
    // 处理 base64 图片
  }
}
</script>

注意事项

1. Canvas 在 onMounted 生命周期中初始化，请回调或延时后再通过 ref 调用暴露方法
2. 高清屏已自动处理 DPR 缩放，导出的图片清晰度与实际像素匹配
3. 旋转导出使用离屏 Canvas 实现，设置 rotateExport prop 为 true 启用
4. 微信小程序平台导出使用 uni.canvasToTempFilePath，App/Web 平台使用 toDataURL
5. 横排模式 direction="row" 参考银行签名场景，工具栏在左侧、按钮旋转 90°、占位文字旋转显示