vue-esign 常见问题解决方案

项目基础介绍

vue-esign 是一个基于 Vue.js 的 canvas 手写签字和电子签名组件。它兼容 PC 和 Mobile，支持画布自适应屏幕大小变化，并提供了丰富的自定义选项，如画布尺寸、画笔粗细、颜色、背景色等。该项目主要使用 JavaScript 和 Vue.js 框架进行开发。

新手使用注意事项及解决方案

1. 安装和引入问题

问题描述：新手在安装和引入 vue-esign 时可能会遇到依赖安装失败或引入路径错误的问题。

解决步骤：

1. 安装依赖：

   • 使用 npm 安装：

     npm install vue-esign --save
     

   • 使用 yarn 安装：

     yarn add vue-esign
     

2. 全局引入：

   • 在 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');
     

3. 局部引入：

   • 在组件中引入：

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

2. 画布尺寸和样式问题

问题描述：新手在使用 vue-esign 时可能会遇到画布尺寸不正确或样式不匹配的问题。

解决步骤：

1. 设置画布尺寸：

   • 在组件中设置 width 和 height 属性：

     <vue-esign ref="esign" :width="800" :height="300" />
     

2. 父元素样式：

   • 确保父元素有明确的宽度，vue-esign 组件会自动适应父元素的宽度：

     .parent-element {
       width: 100%;
     }
     

3. 避免直接设置组件样式：

   • 不要直接给 vue-esign 组件设置 style 的宽高，而是通过父元素来控制。

3. 生成图片和清空画布问题

问题描述：新手在使用 vue-esign 时可能会遇到生成图片失败或清空画布后背景色未重置的问题。

解决步骤：

1. 生成图片：

   • 使用 generate() 方法生成图片，并处理成功和失败的回调：

     methods: {
       handleGenerate() {
         this.$refs.esign.generate().then(res => {
           this.resultImg = res;
         }).catch(err => {
           alert(err); // 画布没有签字时会执行这里 'Not Signned'
         });
       }
     }
     

2. 清空画布：

   • 使用 reset() 方法清空画布：

     methods: {
       handleReset() {
         this.$refs.esign.reset();
       }
     }
     

3. 背景色重置：

   • 如果需要清空画布时同时清空背景色，设置 isClearBgColor 属性为 true：

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

通过以上步骤，新手可以顺利解决在使用 vue-esign 过程中常见的问题。