Vue3封装支持Base64导出的电子签名组件

默认支持签字回显，base64压缩，内存释放
传参支持禁用签字也就是查看，组件大小内置'small', 'default', 'large'三个大小
 

效果图

准备工作

组件内用到elementPlus，vue-esign组件，使用前提前安装好。
 
组件代码

1. <template>
2.        
3.        
4.                
5.                         <img v-if="base64Img" :src="base64Img"  />
6.                        
7.                                 <el-icon><EditPen /></el-icon>
8.                                 点击签名
9.                        
10.                
12.                
13.                 <el-dialog v-model="dialogVisible" title="电子签名" width="800px">
14.                         <vue-esign ref="esignRef" :width="800" :height="300" :lineWidth="4" :lineColor="'#000000'" :bgColor="'#ffffff'"  :id="uuid" />
16.                         <template #footer>
17.                                 <el-button @click="dialogVisible = false">取消</el-button>
18.                                 <el-button @click="handleReset">清空</el-button>
19.                                 <el-button type="primary" @click="handleConfirm">确认</el-button>
20.                         </template>
21.                 </el-dialog>
22.        
23. </template>

复制代码

 
使用组件

1. <el-form ref="dataFormRef" :model="form" inline :rules="dataRules">
2.     <el-form-item label="经办人签字" prop="signatureHandler" label-width="8em">
3.                
4.                 <signature-component v-model="form.signatureHandler" />
5.     </el-form-item>
6. </el-form>

复制代码

 
注意事项

使用时将组件内的提示框替换为elementPlus官方的
generateUUID方法自行修改为生成UUID的方法，也可以去掉。
 


来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！