在公务办理、电子合同、在线审批等场景中，手写签名的电子化需求越来越常见。基于 Vue3 开发的 vue3-signature 组件，能快速帮我们实现浏览器端的手写签名功能，无需复杂的 canvas 原生开发，今天就带大家从零掌握这个实用组件的使用。
一、什么是 vue3-signature？
vue3-signature是专门适配 Vue3 生态的手写签名组件，底层基于 canvas 实现，支持鼠标、触摸（移动端）手写，提供了签名保存、清空、回退、更换颜色 / 粗细等核心功能，体积轻量、API 简洁，完美兼容 Vue3 的组合式 API 和语法，是 Vue3 项目实现电子签名的首选方案。
二、快速上手：5 分钟集成到 Vue3 项目
1. 安装依赖
首先在 Vue3 项目中安装组件（支持 npm/yarn/pnpm）：
npmnpm install vue3-signature --save# yarnyarn add vue3-signature# pnpmpnpm add vue3-signature
2. 基础使用示例
在 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
1. 核心属性（Props）
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| width | Number | 400 | 画布宽度（px） |
| height | Number | 200 | 画布高度（px） |
| penColor | String | #000000 | 画笔颜色（支持十六进制） |
| penWidth | Number | 2 | 画笔粗细（px） |
| disabled | Boolean | false | 是否禁用签名 |
| backgroundColor | String | #ffffff | 画布背景色 |
2. 常用方法（通过 ref 调用）
| 方法名 | 参数说明 | 功能 |
|---|---|---|
| clear() | 无 | 清空整个签名画布 |
| undo() | 无 | 撤销上一步书写 |
| canUndo() | 无 | 判断是否可撤销（返回布尔值） |
| getDataUrl(type, quality) | type：图片格式（如 image/png）；quality：清晰度（0-1） | 获取签名的 Base64 编码 |
| getBlob(type, quality) | 同 getDataUrl | 获取签名的 Blob 对象（适合上传） |
四、实战优化：解决常见问题
1. 适配移动端
vue3-signature天然支持触摸事件，只需保证画布宽度适配移动端：
<Vue3Signature :width="document.documentElement.clientWidth - 40" :height="200" ref="signatureRef"/>
2. 校验是否签名
提交前判断用户是否完成签名，避免空签名提交：
const checkSignature = () => { // isEmpty() 判断画布是否为空 if (signatureRef.value.isEmpty()) { alert('请完成手写签名！') return false } return true}// 保存前先校验const saveSignature = () => { if (!checkSignature()) return // 后续保存逻辑...}
3. 图片跨域问题
若需在签名画布中插入背景图（如合同模板），需确保图片资源支持跨域，否则会导致getDataUrl/getBlob报错，可要求后端配置跨域头，或使用同域图片。 **# 五、总结
- vue3-signature是 Vue3 项目实现电子签名的高效组件，基于 canvas 封装，无需原生 canvas 开发，API 简洁易上手；
- 核心流程：安装 → 引入组件 → 配置基础属性 → 通过 ref 调用方法实现清空、保存、撤销等功能；
- 实际开发中需注意移动端适配、签名非空校验、图片跨域等细节，满足不同场景的签名需求。
组件几乎覆盖了电子签名的所有基础场景，无论是简单的表单签名，还是复杂的合同签署，都能快速落地。赶紧在你的 Vue3 项目中试试吧！更多参考地址：www.npmjs.com/package/vue…**
