更新记录

1.0.0（2026-07-02）

首次发布：新增移动端签名弹窗、签名画板、清除、提交、base64 输出，优化微信小程序 Android / HarmonyOS 滚动后 canvas 坐标偏移问题。

平台兼容性

uni-app(3.8.0)

uni-app x

其他

# Ling Signature Modal

一个适用于 uni-app Vue3 的移动端签名弹窗插件，内置底部弹窗、签名画板、清除、提交、base64 输出能力。

插件重点处理了微信小程序 Android / HarmonyOS 在页面滚动后 canvas 坐标漂移、笔迹越出签名面板的问题。

插件目录

ling-signature-modal-plugin
└─ uni_modules
   └─ ling-signature-modal
      ├─ components
      │  └─ ling-signature-modal
      │     └─ ling-signature-modal.vue
      ├─ package.json
      ├─ readme.md
      └─ changelog.md

快速使用

把 uni_modules/ling-signature-modal 复制到你的 uni-app 项目 uni_modules 目录。

<template>
  <button @click="signatureVisible = true">结束服务</button>

  <ling-signature-modal
    v-model="signatureVisible"
    title="签字结束服务"
    @confirm="handleSignatureConfirm"
  />
</template>

<script setup>
import { ref } from 'vue'

const signatureVisible = ref(false)

const handleSignatureConfirm = ({ base64 }) => {
  console.log('签名 base64：', base64)
  // 请求后端接口，例如：{ signImage: base64 }
}
</script>

Android / HarmonyOS 兼容建议

如果页面主体是 scroll-view，建议把组件放在 scroll-view 外层，作为页面根节点的直接子节点。

<template>
  <scroll-view scroll-y>
    <!-- 页面内容 -->
  </scroll-view>

  <ling-signature-modal v-model="signatureVisible" @confirm="handleConfirm" />
</template>

组件内部会在打开时延迟挂载 canvas，并基于真实 DOM 边界重新计算触点坐标，避免页面滚动后安卓/鸿蒙出现签名越界。