1.下载插件

npm install vue-esign --save
或者
yarn add vue-esign

推荐yarn命令

2.1. 全局引用 在main.js 中引入

import vueEsign from 'vue-esign'
Vue.use(vueEsign)

3.在页面中使用组件

        <vue-esign
          ref="esign"
          :width="570"
          :height="280"
          :isCrop="isCrop"
          :lineWidth="lineWidth"
          :lineColor="lineColor"
          :bgColor.sync="bgColor"
        />
        
        
        data(){
        reture {
        lineColor: 'red',
      lineWidth: 6,
      isCrop: false,
      bgColor: '',
      resultImg: '',
        }
        }

4.插件的方法

 // 清空画板 handleReset自己写的函数
    handleReset() {
      this.$refs.esign.reset();
    },
    
    
 // 画板完成，提交审核 handleGenerate自己写的函数
    handleGenerate() {
      this.$refs.esign
        .generate()
        .then((res) => {
          this.autographedPhoto = res; //把base64赋给img
          console.log(this.resultImg);
        })
        .catch((err) => {
          // 画布没有签字时会执行这里
          this.$message.warning('请先完成签名！');
        });
    },

官方网址：www.npmjs.com/package/vue…