uniapp实现电子签名功能

1.访问手写签名组件,弹框签名,可配置签名,签名返回base64,签名专用,手写一键使用 - DCloud 插件市场用于手写签名,签名后可以获取到base64文件,同时内置了弹框签名组件,对于不想布局的同学来说可以开箱即用,可兼容微信使用icon-default.png?t=N7T8https://ext.dcloud.net.cn/plugin?id=12795

此插件可以小模块手写,也可以放大模块版手写

          

2.下载插件,下载完成后,在uniapp中显示

3. 在需要引入的页面位置进行引入该组件,并点击下图的笔图标打开电子签名组件,进行书写,签完之后替换该笔图标的位置

<!-- 在html中 -->
<template>
<!-- 附加内容 -->
			<view class="sign">
				<view class="signPen">
					<signature v-model="title">
						{{title}}
					</signature>
				</view>
				<!-- 签名组件 -->
			</view>
</template>
<!-- 在js中 -->
<script>
	import signature from '@/components/jp-signature/popup.vue'
	export default {
		components: {
			signature
		},
	data() {
			return {
				title: '',
     }
    }
</script>

引入之后的样式是这样的:

4.根据需求修改 样式,可以在自定义组件components中的jp-signature文件夹中的对应位置进行修改。例如:把此处修改为笔图标进行点击

找到popup.vue文件中的该处,将该处的点击签名改为🖊图标

 改完的代码如下:

	<div v-if="!value && !readonly" class="explain" @click="toPop">
					<!-- {{placeholder?placeholder:'点击签名'}} -->
					<image src="/static/circulationContract/sign_pen.png" mode="widthFix"></image>
	</div>

其他样式省略

5.打印出保存的签名图片路径——————在jp-signature文件夹中index.vue文件中

放大模块的签名路径

缩小模块的签名路径

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值