当前位置：首页 > news >正文

vue3-signature实现电子签名

news 2026/5/12 10:41:41

组件官方参考地址：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 项目根目录执行以下命令：

# Using npm npm install vue3-signature # Using yarn yarn add vue3-signature # Using pnpm pnpm add vue3-signature

全局注册

// main.js import { createApp } from "vue"; import Vue3Signature from "vue3-signature"; import App from "./App.vue"; createApp(App).use(Vue3Signature).mount("#app");

局部直接引入使用

import Vue3Signature from'vue3-signature'

vue3使用案例

<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 个常见问题

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

响应式设计

<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>

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

// 校验是否完成签名 const checkSignature = () => { if (signatureRef.value.isEmpty()) { alert('请完成手写签名！') returnfalse } returntrue } // 保存签名前先执行校验 const saveSignature = () => { if (!checkSignature()) return // 后续保存逻辑... }