vue3 电子签名实现

<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.$();

};

// 保存

const save = () => {

// 可选配置参数 ，在未设置format或quality属性时可在生成图片时配置 例如： {format:'image/jpeg', quality: 0.5}

// this.$({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.$("您还未完成签字，请签字完成后保存");

});

};

</script>