参考博客:https://www.cnblogs.com/smile-fanyin/p/16544271.html,里面还包含了橡皮擦功能,因为签名对橡皮擦功能需求不大,所以没有使用。
在做中石油后台管理项目时,遇到了交接班表格要求实现签字效果,在参考上述博客后,在vue3项目中实现了此功能,上源码:
<template>
<a-modal
v-model:visible="panelVisible"
class="signNameModel"
title="签字"
width="600"
height="400"
size="large"
:destroy-on-close="true"
@cancel="cancel"
>
<template #default>
<div class="signWrap">
<VueSignaturePad
ref="signaturePadRef"
width="100%"
height="100%"
:options="options"
/>
</div>
</template>
<template #footer>
<div class="footer flex justify-between">
<div class="otherSet flex">
<div class="penTxt">笔刷大小:</div>