签字组件 vue-esign

前言

使用【vue-esign】组件二次封装自定义手写签名组件，一个基于canvas开发封装实现的通用手写签名板(电子签名板),支持PC端和移动端，效果如下图所示：

使用步骤

第一步，下载插件

npm install vue-esign --save

第二步，注册封装组件

// 全局 vue2 main.js
import vueEsign from 'vue-esign'
Vue.use(vueEsign)
// 全局vue3 main.js
import { createApp } from 'vue'
import App from './App.vue'
import vueEsign from 'vue-esign'
const app = createApp(App)
app.use(vueEsign)
// 局部
import vueEsign from 'vue-esign'
components: { vueEsign }

*插件使用时 必须设置 ref ，用来调用组件的两个内置方法 reset() 和 generate()

<template>
  <el-dialog
    title="在线签字"
    :visible.sync="visible"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <vue-esign
      class="sign-view"
      ref="esign"
      :width="800"
      :height="300"
      :isCrop="isCrop"
      :lineWidth="lineWidth"
      :lineColor="lineColor"
      :bgColor.sync="bgColor"
    />
    <div class="btn-list">
      <el-button type="danger" @click="reset">清空</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </el-dialog>
</template>

import vueEsign from "vue-esign";
export default {
  components: { vueEsign },
  props: {
    // 弹窗显示与否
    visible: {
      typeof: Boolean,
      default: false,
    },
  },
  data() {
    return {
      lineWidth: 6,
      lineColor: "#000000",
      bgColor: "",
      resultImg: "",
      isCrop: false,
    };
  },
  methods: {
    // 清空画板
    reset() {
      this.$refs.esign.reset();
    },
    // 保存
    save() {
      // 可选配置参数 ，在未设置format或quality属性时可在生成图片时配置 例如： {format:'image/jpeg', quality: 0.5}
      // this.$refs.esign.generate({format:'image/jpeg', quality: 0.5})
      this.$refs.esign
        .generate()
        .then((res) => {
          this.$emit("finsih",res)
        })
        .catch((err) => {
          // 画布没有签字时会执行这里 'Not Signned'
          this.$message.error("您还未完成签字，请签字完成后保存");
        });
    },
  },
};

使用组件

<template>
  <div id="app">
    ...
    
    <Signature
      :visible="signatureVisible"
      @finsih="signFisish"
      @close="signatureVisible = false"
    ></Signature>
    ...
  </div>
</template>

import Signature from "@/components/dialog/signature";
  ...
  components:{Signature},
  data() {
    return {
      signatureVisible: true,
    };
  },
  methods:{
      signFisish(val){
          console.log(val);
          // data:image/png;base64,........
      }
  },