下载插件
https://github.com/szimek/signature_pad
yarn add signature_pad
创建.vue文件
<template>
<div class="signature" v-loading="loading">
<div class="signature-content">
<div class="signature-content-inside">
<canvas class="canvas" />
</div>
</div>
<div class="signature-buttoms">
<el-button type="danger" @click="click_del">重新签名</el-button>
<el-button type="primary" @click="click_submit">确认签名</el-button>
</div>
</div>
</template>
<script>
import {onMounted, reactive, toRefs} from 'vue';
import SignaturePad from 'signature_pad';
export default {
props: {
signatureObj: {
type: Object,
default: () => {
return {
height: 240,
width: 460,
};
},
},
},
setup(props) {
const data = reactive({
signaturePad: null, // 存放竖屏SignaturePad对象
signature_value: null,
loading: false,
});
// 初始化画板
function init() {
let canvas = document.querySelector('.canvas');
data.signaturePad = new SignaturePad(canvas, {
minWidth: 2,
maxWidth: 2,
penColor: 'rgb(0, 0, 0)',
});
// 画板高度
canvas.height = props.signatureObj.height;
// 画板宽度
canvas.width = document.body.clientWidth - props.signatureObj.width;
}
// 清除画板
function click_del() {
data.signaturePad.clear();
}
// 确认画板
function click_submit() {
data.signature_value = data.signaturePad.toDataURL();
data.loading = true;
setTimeout(() => {
data.loading = false;
data.signaturePad.clear();
}, 1000);
}
onMounted(() => {
init();
});
return {...toRefs(data), click_del, click_submit};
},
};
</script>
<style lang="scss" scoped>
.signature {
// 写字板
&-content {
padding: 15px;
width: 100%;
height: auto;
background-color: #fff;
display: flex;
justify-content: center;
&-inside {
display: flex;
position: relative;
background-color: rgb(242, 242, 242);
}
}
// 按钮们
&-buttoms {
width: 214px;
margin: 0px auto;
}
}
</style>