vue2签名版、画板 组件

<template>
  <!-- 签名版 -->
  <div class="signature-edition">
    <el-dialog title="签名版" :visible.sync="dialogVisible" width="50%">

      <div class="signature-edition-content">
        <vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth"
          :lineColor="lineColor" />
      </div>

      <div slot="footer" class="dialog-footer">
        <custom-button confirmText="取消" type="cancel" @click.native="dialogVisible = false"></custom-button>
        <custom-button confirmText="重新签名" type="confirm" @click.native="handleReset"
          style="margin:0 .25rem"></custom-button>
        <custom-button confirmText="确定" type="confirm" @click.native="handleGenerate"></custom-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'SignatureEdition',
  data() {
    return {
      dialogVisible: false,
      lineWidth: 6,
      lineColor: '#000000',
      bgColor: '#F8F8F8',
      resultImg: '',
      isCrop: false
    }
  },
  methods: {
    show() {
      this.dialogVisible = true;
    },
    close() {
      this.dialogVisible = false;
    },
    handleReset() {
      this.$refs['esign'].reset() //清空画布
    },
    handleGenerate() {
      this.$refs['esign'].generate().then(res => {
        this.resultImg = res // 得到了签字生成的base64图片
        console.log(111, this.resultImg);
      }).catch(err => { //  没有签名，点击生成图片时调用
        this.$message({
          message: err + ' 未签名！',
          type: 'warning'
        })
        alert(err) // 画布没有签字时会执行这里 'Not Signned'
      })
    }
  }
}
</script>
<style lang="scss">
.signature-edition {

  .el-dialog {
    border-radius: .25rem;
  }

  .el-dialog__title {
    font-weight: bold;
    color: #000000;
  }

  .signature-edition-content {
    background-color: #F8F8F8;

    >div {
      &:first-child {
        color: #000000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: .25rem;

        >span {
          &:first-child {
            font-weight: bold;
            font-size: 16px;
            color: #000000;
          }

          &:last-child {
            font-size: 16px;
            color: #999999;
          }
        }
      }

      &:not(:first-child) {
        font-weight: bold;
        font-size: 14px;
        color: #000000;
        line-height: 2;
      }
    }
  }


  .dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>