NewEsign.vue

<template>
  <div>
    <input class="editInput" placeholder="请签名" v-if="resultImg == '' || resultImg == null" @click="signOpen =true"/>
    <el-dialog title="签名" :visible.sync="signOpen" :close-on-click-modal="false" :z-index="2000">
      <div style="border: 1px solid #cccccc">
        <vue-esign ref="esign" :width="width" :height="height" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
        <div style="text-align: right">
          <button @click="handleReset" style="margin-right: 2px">清空</button>
          <button @click="handleGenerate">确定</button>
        </div>
      </div>
    </el-dialog>
    <div>
      <img v-if="resultImg" :src="resultImg" alt="" style="width: 100%;height: 100%" @click="reWriteSign"/>
    </div>
  </div>
</template>

<script>
  import vueEsign from 'vue-esign'
  export default {
    name: "esign",
    components:{
      vueEsign
    },
    props:{
      width:{
        type:Number
      },
      height:{
        type:Number
      },
      resultImg:{
        type:String,
        default:""
      },
      isReWrite:{
        type:Boolean,
        default:true
      }
    },
    data () {
      return {
        lineWidth: 3,
        lineColor: '#000000',
        bgColor: '',
        isCrop: false,
        signOpen:false
      }
    },
    methods: {
      handleReset () {
        this.$refs['esign'].reset() //清空画布
      },
      handleGenerate () {
        this.$refs['esign'].generate().then(res => {
            this.$emit('update:resultImg',res);
            this.signOpen = false;
            //this.resultImg = res // 得到了签字生成的base64图片
        }).catch(err => { //  没有签名，点击生成图片时调用
            this.$message({
              message: err + ' 未签名！',
              type: 'warning'
            })
        })
      },
      //重签
      reWriteSign(){
        if(this.isReWrite){
          this.signOpen = true;
        }
      }

    }
  }
</script>

<style scoped scss="lang">
  .editInput{
    border: none;
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .editInput:focus{
    outline: none;
  }

</style>