vue3 电子签名实现

电子签名实现"/>

vue3 电子签名实现

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

第一步安装：

npm install vue-esign

引用方式：

全局：

 局部：

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

 使用方式：

<template><!-- 使用这个签名组件 --><vueEsignref="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>

效果展示：