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

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

效果图

准备工作

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

组件代码

<template>
	
	<div>
		<div @click="openDialog" :class="[sizeClass, { &#39;has-sign&#39;: base64Img }]">
			<img v-if="base64Img" :src="base64Img" src=""/>
			<div v-else="">
				
				点击签名
			</div>
		</div>
		
		<el-dialog v-model="dialogVisible" title="电子签名" width="800px">
			<vue-esign ref="esignRef" :width="800" :height="300" :linewidth="4" :linecolor="&#39;#000000&#39;" :bgcolor="&#39;#ffffff&#39;" :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>
		</vue-esign></el-dialog>
	</div>
</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">
    </signature-component></el-form-item>
</el-form>

注意事项

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