电子签名实现"/>
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>
效果展示:
更多推荐
vue3 电子签名实现
发布评论