vue3 电子签名实现

vue电子签名可以通过vue-esign插件来实现:

第一步安装：

npm install vue-esign

引用方式：

全局：

 局部：

// .vue 文件 
import vueEsign form 'vue-esign'

 使用方式：

<template>
  <!-- 使用这个签名组件 -->
  <vueEsign
    ref="esign"
    class="mySign"
    :width="800"
    :height="300"
    :isCrop="isCrop"
    :lineWidth="lineWidth"
    :lineColor="lineColor"
  />
  <span class="dialog-footer">
    <el-button @click="save" type="primary">生成签字图片</el-button>
    <el-button @click="reset">清空画板</el-button>
  </span>
  <img v-if="resultImg" :src="resultImg" alt="Signature Image" />
</template>

<script setup>
import vueEsign from "vue-esign";
import { ref } from "vue";
const lineWidth = ref(0);
const lineColor = ref("#000000");
const bgColor = ref("");
const resultImg = ref("");
const isCrop = ref("");
const esign = ref(null);

// 清空画板
const reset = () => {
  esign.value.reset();
  //   this.$refs.esign.reset();
};
// 保存
const save = () => {
  // 可选配置参数 ，在未设置format或quality属性时可在生成图片时配置 例如： {format:'image/jpeg', quality: 0.5}
  // this.$refs.esign.generate({format:'image/jpeg', quality: 0.5})
  esign.value
    .generate()
    .then((res) => {
      //   this.$emit("finsih", res);
      console.log(res);
      resultImg.value = res; 
    })
    .catch((err) => {
      console.log(err);
      // 画布没有签字时会执行这里 'Not Signned'
      //   this.$message.error("您还未完成签字，请签字完成后保存");
    });
};
</script>

效果展示：