Vue3封装支持Base64导出的电子签名组件
默认支持签字回显，base64压缩，内存释放传参支持禁用签字也就是查看，组件大小内置'small', 'default', 'large'三个大小
效果图
准备工作
组件内用到elementPlus，vue-esign组件，使用前提前安装好。
组件代码
<template>
<img v-if="base64Img" :src="base64Img"/>
<el-icon><EditPen /></el-icon>
点击签名
<el-dialog v-model="dialogVisible" title="电子签名" width="800px">
<vue-esign ref="esignRef" :width="800" :height="300" :lineWidth="4" :lineColor="'#000000'" :bgColor="'#ffffff'":id="uuid" />
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button @click="handleReset">清空</el-button>
<el-button type="primary" @click="handleConfirm">确认</el-button>
</template>
</el-dialog>
</template>
使用组件
<el-form ref="dataFormRef" :model="form" inline :rules="dataRules">
<el-form-item label="经办人签字" prop="signatureHandler" label-width="8em">
<signature-component v-model="form.signatureHandler" />
</el-form-item>
</el-form>
注意事项
使用时将组件内的提示框替换为elementPlus官方的
generateUUID方法自行修改为生成UUID的方法，也可以去掉。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]