Vue-Esign 是一个基于 Vue.js 的电子签名组件，提供了易于集成和使用的解决方案，帮助开发者实现电子签名功能，特别适合应用在合同签署、协议确认等场景。
以下是 Vue-Esign 的基本使用教程，帮助你快速集成并使用该组件。
1. 安装 Vue-Esign
首先，你需要在你的 Vue 项目中安装 vue-esign 组件。使用 npm 或 yarn 安装。
使用 npm 安装
npm install vue-esign --save使用 yarn 安装
yarn add vue-esign 2. 在项目中引入 Vue-Esign
安装完毕后，你需要在你的 Vue 项目中引入 Vue-Esign 组件。
在组件中使用
-
在
main.js或main.ts中全局注册 Vue-Esign (如果希望全局使用组件):import Vue from 'vue'; import VueEsign from 'vue-esign'; Vue.use(VueEsign); -
在单个组件中按需引入 (如果只想在特定组件中使用):
<template> <div> <vue-esign ref="esign" :width="800" :height="400"></vue-esign> </div> </template> <script> import { VueEsign } from 'vue-esign'; export default { components: { VueEsign }, data() { return { width: 800, height: 400 }; } }; </script>
3. 使用 Vue-Esign 组件
Vue-Esign 提供了一些配置选项，可以帮助你定制电子签名的样式、大小、功能等。
基本用法
在你的 Vue 组件中，使用 <vue-esign> 标签来渲染电子签名组件。
<template> <div> <vue-esign ref="esign" :width="800" :height="400" :save="saveSignature" :showClearButton="true" :showSaveButton="true" :backgroundColor="'#f5f5f5'" :borderColor="'#ccc'" /> </div> </template> <script> import { VueEsign } from 'vue-esign'; export default { components: { VueEsign }, data() { return { width: 800, height: 400 }; }, methods: { // 保存签名的方法，返回 Base64 编码或图片 URL saveSignature(signatureData) { console.log('签名数据：', signatureData); // 你可以在这里处理签名数据，比如发送到服务器保存 } } }; </script> <style> /* 你可以根据需要调整样式 */ </style>4. 配置项
Vue-Esign 提供了多个配置项来定制签名功能：
width：设置签名画布的宽度（默认为 800px）。height：设置签名画布的高度（默认为 400px）。save：一个回调函数，在签名完成后调用，返回签名数据。你可以在这里处理签名数据，通常是将其保存为图片。showClearButton：是否显示清除按钮，默认值为true，用户可以清除签名。showSaveButton：是否显示保存按钮，默认值为true，用户可以保存签名。backgroundColor：设置签名画布的背景颜色，默认为白色。borderColor：设置签名画布的边框颜色，默认为#ccc。
5. 获取签名数据
当用户完成签名后，你可以通过 save 回调函数获取签名的数据，通常这些数据会以 Base64 编码的格式提供，这样你就可以将它作为图片上传到服务器。
methods: { // 保存签名的数据 saveSignature(signatureData) { // signatureData 是 Base64 编码的签名图片 console.log('签名数据:', signatureData); // 将签名数据上传到服务器或进行其他处理 } }
6. 清除签名
你可以调用组件的 clear 方法来清除签名。
<template> <div> <vue-esign ref="esign" :width="800" :height="400" :save="saveSignature" :showClearButton="true" :showSaveButton="true" :backgroundColor="'#f5f5f5'" :borderColor="'#ccc'" /> </div> </template> <script> import { VueEsign } from 'vue-esign'; export default { components: { VueEsign }, data() { return { width: 800, height: 400 }; }, methods: { // 保存签名的方法，返回 Base64 编码或图片 URL saveSignature(signatureData) { console.log('签名数据：', signatureData); // 你可以在这里处理签名数据，比如发送到服务器保存 } } }; </script> <style> /* 你可以根据需要调整样式 */ </style>例如，添加一个按钮来清除签名：
<template> <div> <vue-esign ref="esign" :width="800" :height="400" :save="saveSignature" :showClearButton="true" :showSaveButton="true" :backgroundColor="'#f5f5f5'" :borderColor="'#ccc'" /> </div> </template> <script> import { VueEsign } from 'vue-esign'; export default { components: { VueEsign }, data() { return { width: 800, height: 400 }; }, methods: { // 保存签名的方法，返回 Base64 编码或图片 URL saveSignature(signatureData) { console.log('签名数据：', signatureData); // 你可以在这里处理签名数据，比如发送到服务器保存 } } }; </script> <style> /* 你可以根据需要调整样式 */ </style>7. 提交签名
你可以将 Base64 编码的签名图片作为表单数据的一部分提交到服务器。以下是一个简单的示例：
methods: { submitSignature() { const signature = this.$refs.esign.getSignatureData(); // 假设你有一个 API 接口可以提交签名数据 axios.post('/api/submit-signature', { signatureData: signature }).then(response => { console.log('签名提交成功', response); }).catch(error => { console.error('签名提交失败', error); }); } }8. 其它功能和样式定制
你还可以根据需求进一步定制签名画布的样式、功能，或者通过 Vue 的 v-bind 动态绑定一些属性。
总结
Vue-Esign 提供了一个简单易用的电子签名组件，帮助开发者轻松集成电子签名功能。通过灵活的配置选项，你可以定制签名画布的大小、样式、功能等。使用时只需关注获取签名数据并进行处理（例如上传或存储）。
