Vue电子签名板

1.安装vue电子前面组件

npm install vue-esign --save

2.在main.js中引入组件

import vueEsign from 'vue-esign'

Vue.use(vueEsign)

3.Demo模板

<template>
      <div class="esignTest">
          <div style="border: 2px solid #E6E6E6 ;background-color: white">
          <--自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色-->
          <vue-esign
			ref="esign"
			:width="800"
			:height="300"
  			:is-crop="isCrop"
 		    :line-width="lineWidth"
  			:line-color="lineColor"
  			:bg-color.sync="bgColor"
			/>
          </div>
            <button @click="handleReset">清空画板</button>
            <button @click="handleGenerate">生成图片</button>
    		签字结果：
  			<img :src="resultImg" width="200" height="100" alt="">
  </div>
</template>
<script>
  export default {
    name:'EsignTest',
    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'
        })
      }
    }
  }

</script>