一、安装插件vue-esign

npm install vue-esign --save

二、main.js引入

// 引入电子签名
import vueEsign from "vue-esign";
// 使用电子签名
Vue.use(vueEsign);

三、二次封装

<template>
  <el-dialog
    append-to-body
    class="sign-dialog"
    title="电子签名"
    :visible.sync="visible"
  >
    <div class="box">
      <vue-esign
        ref="esign"
        :width="800"
        :height="400"
        :isCrop="isCrop"
        :lineWidth="lineWidth"
        :lineColor="lineColor"
        :bgColor.sync="bgColor"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleReset">清空画板</el-button>
      <el-button type="primary" @click="handleGenerate">生成图片</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      lineWidth: 6,
      lineColor: "#000000",
      bgColor: "",
      resultImg: "",
      isCrop: false,
    };
  },
  methods: {
    // 初始化方法
    init() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.esign.reset();
      });
    },
    // 清空画板
    handleReset() {
      this.$refs.esign.reset();
    },
    // 生成照片
    handleGenerate() {
      this.$refs.esign
        .generate()
        .then((base64) => {
          this.resultImg = base64; //默认生成的是base64形式的图片
          // 将生成的base64格式的图片传给父组件
          this.$emit("handleImg", base64);
          this.visible = false;
          //   如果需要下载
          //   const a = document.createElement("a");
          //   a.href = res;
          //   a.download = "签名.png";
          //   a.click();
          //   a.remove();
        })
        .catch((err) => {
          this.$message.error(err); // 画布没有签字时会执行这里 'Not Signned'
        });
    },
  },
};
</script>

<style lang="scss">
.sign-dialog {
  .el-dialog {
    width: 840px;
  }
  .box {
    margin: 0 auto;
    background: #ecf0fa;
    border-radius: 3px;
    width: 800px;
    overflow: hidden;
  }
}
</style>

四、二次封装使用

4.1、引入

import VueEsign from "@/components/asset/vue-Esign.vue";
export default {
  components: {
    VueEsign,
  },
}

4.2、html中

    <!-- 电子签名组件 -->
    <VueEsign v-if="showVueEsign" @handleImg="handleImg" ref="dialog-Esign" />

4.3、methods中

    // 点击电子签名的方法
    sign() {
      // 展示签名组件
      this.showVueEsign = true;
      this.$nextTick(() => {
        // 触发组件的初始化方法
        this.$refs["dialog-Esign"].init();
      });
    },

    // 回显电子签名图片
    handleImg(base64) {
      //使用$set为dataForm添加esign,并且esign具有自己的getter和setter（响应式）触发Vue更新页面
      this.$set(this.dataForm, "esign", base64);
      // 调用接口更新数据库
      changeRecord(this.dataForm).then(() => {});
    },