Vue3手写签名组件推荐：5分钟集成，支持触摸/鼠标双端，开源免费
在数字化办公的当下，电子合同签署、公务在线办理、审批流程签字……手写签名的电子化需求随处可见。但如果从零开始用 Canvas 开发手写签名功能，既要处理鼠标/触摸事件，又要做兼容适配，费时又费力。
今天给大家安利一款 vue3 专属的手写签名神器——vue3-signature 组件，底层基于 Canvas 封装，核心功能一键调用，5 分钟就能集成到项目中，不用再写复杂的原生 Canvas 代码，新手也能轻松拿捏！
✍️ 先了解：vue3-signature 到底是什么？
vue3-signature 是专门为 Vue3 生态打造的手写签名组件，完美适配 Vue3 的组合式 api 和语法，堪称 Vue3 项目实现电子签名的首选方案。
它的核心优势超亮眼：
底层基于 Canvas 实现，支持鼠标、移动端触摸双端手写，无需额外做事件兼容；
自带签名保存、清空、回退核心功能，还能自定义画笔颜色/粗细；
体积轻量无冗余，API 设计简洁易懂，调用无门槛；
直接封装好所有底层逻辑，开发者只需关注业务使用，不用重复造轮子。
🚀 快速上手：5 分钟集成，复制粘贴就能用
话不多说，直接上干货！整个集成过程分两步：安装依赖 + 基础使用，全程不超 5 分钟，支持 npm/yarn/pnpm 三种包管理工具，按需选择即可。
1. 安装组件依赖
在你的 Vue3 项目根目录执行以下命令：
# npm
npm install vue3-signature --save
# yarn
yarn add vue3-signature
# pnpm
pnpm add vue3-signature2. 基础使用完整示例
在 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 @click="clearSignature">清空签名</button>
<button @click="saveSignature">保存签名</button>
<button @click="undoSignature">撤销一步</button>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import Vue3Signature from 'vue3-signature'
// 获取组件实例，用于调用内置方法
const signatureRef = ref(null)
// 清空整个签名画布
const clearSignature = () => {
signatureRef.value.clear()
}
// 撤销上一步书写，先判断是否有可撤销步骤
const undoSignature = () => {
if (signatureRef.value.canUndo()) {
signatureRef.value.undo()
} else {
alert('已无可撤销的步骤！')
}
}
// 保存签名，支持Base64/Blob两种格式
const saveSignature = () => {
// 获取Base64格式（适合展示/简单存储）
const base64 = signatureRef.value.getDataUrl('image/png', 1.0)
// 获取Blob格式（适合后端上传/文件处理）
// const blob = signatureRef.value.getBlob('image/png', 1.0)
console.log('签名Base64：', base64)
// 后续可将Base64/Blob上传后端，或直接展示在页面
}
</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-btns button {
padding: 6px 12px;
background: #409eff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.signature-btns button:hover {
background: #66b1ff;
}
</style>📋 核心配置 & 常用 API：灵活定制签名功能
掌握以下核心属性和方法，就能根据业务需求自定义签名画布，所有功能都通过 ref 调用组件实例实现，简单又灵活。
🔧 核心属性（Props）
可直接绑定到组件上，自定义画布和画笔样式，默认值满足大部分基础场景：
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| width | Number | 400 | 画布宽度（px） |
| height | Number | 200 | 画布高度（px） |
| penColor | String | #000000 | 画笔颜色（支持十六进制） |
| penWidth | Number | 2 | 画笔粗细（px） |
| disabled | Boolean | false | 是否禁用签名（只读模式） |
| backgroundColor | String | #ffffff | 画布背景色 |
📌 常用方法（通过 ref 调用）
组件内置的核心功能方法，覆盖签名操作全流程：
| 方法名 | 参数说明 | 功能 |
|---|---|---|
| clear() | 无 | 清空整个签名画布 |
| undo() | 无 | 撤销上一步书写 |
| canUndo() | 无 | 判断是否可撤销（返回布尔值） |
| getDataUrl(type, quality) | type：图片格式（如 image/png）；quality：清晰度（0-1） | 获取签名的 Base64 编码 |
| getBlob(type, quality) | 同 getDataUrl | 获取签名的 Blob 对象（适合后端上传） |
💡 实战优化：解决开发中 3 个常见问题
基础功能实现后，实际开发中还会遇到移动端适配、空签名提交、跨域等问题，这几个优化方案帮你完美避坑！
1. 移动端适配：画布宽度自适应
vue3-signature 天然支持触摸事件，不用额外处理，只需让画布宽度适配移动端屏幕即可：
<Vue3Signature
:width="document.documentElement.clientWidth - 40"
:height="200"
ref="signatureRef"
/>2. 签名校验：避免空签名提交
提交前判断画布是否有签名，防止用户未签字就提交，通过 isEmpty() 方法实现：
// 校验是否完成签名
const checkSignature = () => {
if (signatureRef.value.isEmpty()) {
alert('请完成手写签名！')
return false
}
return true
}
// 保存签名前先执行校验
const saveSignature = () => {
if (!checkSignature()) return
// 后续保存逻辑...
}3. 跨域问题：插入背景图必看
如果需要在签名画布中插入合同模板、表单背景图，必须保证图片资源支持跨域，否则会导致 getDataUrl/getBlob 方法报错。
✅ 解决办法：要求后端配置跨域响应头，或直接使用项目同域的图片资源。
📝 最后总结
vue3-signature 绝对是 Vue3 项目实现电子签名的「效率神器」，核心亮点总结：
开箱即用：基于 Canvas 封装，无需原生开发，5 分钟快速集成；
双端兼容：支持电脑鼠标、移动端触摸，适配所有办公场景；
功能齐全：自带清空、撤销、保存功能，支持 Base64/Blob 双格式导出；
灵活定制：可自定义画布大小、画笔颜色/粗细，满足个性化需求。
从简单的表单签名，到复杂的电子合同签署，这个组件都能完美落地，覆盖所有电子签名基础场景。赶紧把这个实用组件加入你的 Vue3 技术工具箱，让电子签名开发变得超轻松！
👉 组件官方参考地址：https://www.npmjs.com/package/vue3-signature
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
