在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理

npm install vue-esign --save

<!--vue2-->
<vue-esignref="esign":width="800":height="300":isCrop="isCrop":lineWidth="lineWidth":lineColor="lineColor":bgColor.sync="bgColor" />
<!--vue3-->
<vue-esignref="esign":width="800":height="300":isCrop="isCrop":lineWidth="lineWidth":lineColor="lineColor"v-model:bgColor="bgColor" />

<!--isClearBgColor为false时，不必再给bgColor加sync修饰符或v-model-->

<button@click="handleReset">清空画板</button> 
<button@click="handleGenerate">生成图片</button>

data () {return{

    lineWidth:6,

    lineColor:'#000000',

    bgColor:'',

    resultImg:'',

    isCrop:false}

},

methods: {

  handleReset () {this.$refs.esign.reset()

  },

  handleGenerate () {this.$refs.esign.generate().then(res =>{this.resultImg =res

    }).catch(err =>{

      alert(err)//画布没有签字时会执行这里 'Not Signned'
})

  }

}

import Vue from 'vue'import vueEsign from'vue-esign' //电子签名
exportdefault{

  name:'Signature',

  components: {

    vueEsign

  },

  <divclass="sigbut">
    <divclass="tip">请在这里签名</div>
    <divclass="left-bu">
      <el-buttonclass="clear-bu"size="mini"@click="handleReset">清空签名</el-button>
      <el-buttonclass="sure"size="mini":disabled="!showSig"@click="handleGenerate">确定签名</el-button>
    </div>
  </div>
  <divclass="sig">
    <vue-esignv-if="showSig"ref="esign":width="800":height="150":is-crop="isCrop":line-width="lineWidth":line-color="lineColor":bg-color.sync="bgColor" />
    <imgv-if="!showSig":src="resultImg"alt=""class="sig-img">
  </div>

methods: {//清空画布
handleReset () {this.resultImg = ''
      this.showSig = true;this.$nextTick(() =>{this.$refs.esign.reset()

      })

    },//生成签名图片
handleGenerate () {this.$refs.esign.generate().then(res =>{if(res) {this.showSig = false;this.resultImg =res;

        }

      }).catch(err =>{this.$message({

          message:'请签名',

          type:'warning'});

      })

    },