vue3-signature实现电子签名

组件官方参考地址：https://github.com/WangShayne/vue3-signature/blob/HEAD/README.zh-CN.md

在数字化办公的当下，电子合同签署、公务在线办理、审批流程签字...... 手写签名的电子化需求随处可见。但如果从零开始用 Canvas 开发手写签名功能，既要处理鼠标 / 触摸事件，又要做兼容适配，费时又费力。

今天给大家安利一款 Vue3 专属的手写签名神器 ------vue3-signature组件，底层基于 Canvas 封装，核心功能一键调用，5 分钟就能集成到项目中，不用再写复杂的原生 Canvas 代码，新手也能轻松拿捏！

vue3-signature 到底是什么？

vue3-signature 是专门为 Vue3 生态打造的手写签名组件，完美适配 Vue3 的组合式 API 和语法，堪称 Vue3 项目实现电子签名的首选方案。

它的核心优势超亮眼：

底层基于 Canvas 实现，支持鼠标、移动端触摸双端手写，无需额外做事件兼容；
自带签名保存、清空、回退核心功能，还能自定义画笔颜色 / 粗细；
体积轻量无冗余，API 设计简洁易懂，调用无门槛；
直接封装好所有底层逻辑，开发者只需关注业务使用，不用重复造轮子。

安装

在你的 Vue3 项目根目录执行以下命令：

javascript 复制代码

# Using npm
npm install vue3-signature

# Using yarn
yarn add vue3-signature

# Using pnpm
pnpm add vue3-signature

全局注册

javascript 复制代码

// main.js
import { createApp } from "vue";
import Vue3Signature from "vue3-signature";
import App from "./App.vue";

createApp(App).use(Vue3Signature).mount("#app");

局部直接引入使用

javascript 复制代码

import Vue3Signature from'vue3-signature'

vue3使用案例

javascript 复制代码

<template>
  <div class="signature-container">
    <!-- 签名画布核心组件 -->
    <Vue3Signature
      ref="signatureRef"
      :width="500"
      :height="300"
      pen-color="#000000"
      :pen-width="3"
      :disabled="false"
      class="signature-canvas"
    />

    <!-- 操作按钮组 -->
    <div class="signature-btns">
      <button class="signature-btnsbutton" @click="clearSignature">清空签名</button>
      <button class="signature-btnsbutton" @click="saveSignature">保存签名</button>
      <button class="signature-btnsbutton" @click="undoSignature">撤销一步</button>
    </div>
</div>
</template>

<script setup lang="ts">
import { ref } from'vue'
import Vue3Signature from'vue3-signature'
// 获取组件实例，用于调用内置方法
const signatureRef:any = ref(null)

// 清空整个签名画布
const clearSignature = () => {
  signatureRef.value.clear()
}

// 撤销上一步书写
const undoSignature = () => {
    signatureRef.value.undo()
}

// // 保存签名，支持Base64/Blob两种格式
const saveSignature = () => {
  try {
    // 官方标准方法：toDataURL(格式, 压缩率)
    const base64 = signatureRef.value?.toDataURL('image/png', 1.0);
    console.log('签名Base64：', base64);
    
    // 或使用save()别名（兼容旧版）
    // const base64 = signatureRef.value?.save('image/png', 1.0);
  } catch (error) {
    console.error('保存失败:', error);
    alert('签名保存失败，请检查组件状态');
  }
};

</script>

<style scoped>
.signature-container {
width: 500px;
margin: 20px auto;
}
.signature-canvas {
border: 1px solid #e5e5e5;
border-radius: 4px;
}
.signature-btns {
margin-top: 15px;
display: flex;
gap: 10px;
}
.signature-btnsbutton {
padding: 6px12px;
background: #5b636b;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.signature-btnsbutton:hover {
background: #66b1ff;
}
</style>

解决开发中 3 个常见问题

基础功能实现后，实际开发中还会遇到移动端适配、空签名提交、跨域等问题，这几个优化方案帮你完美避坑！

响应式设计

javascript 复制代码

<template>
  <div class="signature-container">
    <Vue3Signature
      ref="signature"
      :w="'100%'"
      :h="'100%'"
      :clearOnResize="false"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";

const signature = ref(null);
</script>

<style scoped>
.signature-container {
  width: 100%;
  height: 400px;
  max-width: 800px;
  margin: 0 auto;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .signature-container {
    height: 300px;
  }
}
</style>

签名校验：避免空签名提交

javascript 复制代码

// 校验是否完成签名
const checkSignature = () => {
if (signatureRef.value.isEmpty()) {
    alert('请完成手写签名！')
    returnfalse
  }
returntrue
}

// 保存签名前先执行校验
const saveSignature = () => {
if (!checkSignature()) return
// 后续保存逻辑...
}

跨域问题：插入背景图必看

如果需要在签名画布中插入合同模板、表单背景图，必须保证图片资源支持跨域 ，否则会导致getDataUrl/getBlob方法报错。✅ 解决办法：要求后端配置跨域响应头，或直接使用项目同域的图片资源。