5分钟快速上手：vue-esign 手写签名组件终极指南

5分钟快速上手：vue-esign 手写签名组件终极指南

【免费下载链接】vue-esigncanvas手写签字 电子签名 A canvas signature component of vue.项目地址: https://gitcode.com/gh_mirrors/vu/vue-esign

vue-esign是一个基于 Vue.js 的 canvas 手写签字和电子签名组件，它能够完美兼容 PC 和 Mobile 设备，为你的项目提供专业的签名解决方案。无论你是需要在线合同签署、电子表单签名，还是移动端手写输入，vue-esign 都能满足你的需求。🎯

📦 快速安装与引入

vue-esign 快速安装

安装 vue-esign 非常简单，只需一行命令：

npm install vue-esign --save

全局引入配置

Vue 2 项目：

// main.js import vueEsign from 'vue-esign'; Vue.use(vueEsign);

Vue 3 项目：

// main.js import { createApp } from 'vue'; import App from './App.vue'; import vueEsign from 'vue-esign'; const app = createApp(App); app.use(vueEsign); app.mount('#app');

局部引入方式

如果你只需要在特定组件中使用，可以采用局部引入：

import vueEsign from 'vue-esign'; export default { components: { vueEsign } };

🎨 手写签名画布设置

基础画布配置

在页面中使用 vue-esign 组件时，需要正确设置画布参数：

<!-- Vue 2 --> <vue-esign ref="esign" :width="800" :height="300" /> <!-- Vue 3 --> <vue-esign ref="esign" :width="800" :height="300" /> <button @click="handleReset">清空画板</button> <button @click="handleGenerate">生成图片</button>

关键属性说明

属性	类型	默认值	说明
width	Number	800	画布宽度，即导出图片的宽度
height	Number	300	画布高度，即导出图片的高度
lineWidth	Number	4	画笔粗细
lineColor	String	#000000	画笔颜色
bgColor	String	空	画布背景色，为空时画布背景透明
isCrop	Boolean	false	是否裁剪四周空白部分
isClearBgColor	Boolean	true	清空画布时是否同时清空背景色

🔧 vue-esign 常见问题处理

画布尺寸适配问题

问题：画布显示不正常或尺寸不符合预期

解决方案：

• 确保父元素有明确的宽度设置
• 不要直接给 vue-esign 组件设置 style 宽高
• 组件会自动适应父元素的宽度

.signature-container { width: 100%; max-width: 800px; }

生成图片失败问题

问题：点击生成图片按钮无响应或报错

解决方案：

methods: { handleGenerate() { this.$refs.esign.generate().then(res => { this.resultImg = res; // 获取 base64 格式的图片 }).catch(err => { alert(err); // 画布没有签字时会提示 'Not Signned' }); } }

清空画布背景色问题

问题：清空画布后背景色没有重置

解决方案：

<vue-esign ref="esign" :isClearBgColor="true" />

💡 高级功能配置

图片格式与质量设置

vue-esign 支持多种图片格式导出：

// 生成高质量 PNG 图片 this.$refs.esign.generate(); // 生成 JPG 格式图片（注意：透明背景会变黑色） this.$refs.esign.generate({format:'image/jpeg', quality: 0.8});

裁剪功能使用

开启裁剪功能可以去除签名周围的空白区域：

<vue-esign ref="esign" :isCrop="true" />

🚀 最佳实践建议

1. 响应式适配：vue-esign 会自动处理窗口缩放和屏幕旋转，无需手动重置画布
2. 错误处理：始终处理 generate() 方法的 Promise 拒绝情况
3. 移动端优化：组件已内置触摸事件支持，在移动设备上也能流畅使用
4. 性能考虑：对于频繁使用的场景，建议使用局部引入方式

通过以上指南，相信你已经能够快速上手 vue-esign 手写签名组件。如果在使用过程中遇到其他问题，可以查看源码目录：src/ 来深入了解组件的实现细节。

记住：设置正确的ref属性是调用组件方法的关键！✨

【免费下载链接】vue-esigncanvas手写签字 电子签名 A canvas signature component of vue.项目地址: https://gitcode.com/gh_mirrors/vu/vue-esign