vue3 电子签名实现

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

第一步安装：

npm install vue-esign

引用方式：

全局：

 局部：

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

 使用方式：

 
<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>

效果展示：