uniapp实现电子签名功能

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

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

uniapp实现电子签名功能_第1张图片          uniapp实现电子签名功能_第2张图片

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

uniapp实现电子签名功能_第3张图片

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

uniapp实现电子签名功能_第4张图片




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

uniapp实现电子签名功能_第5张图片

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

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

 改完的代码如下:

	

其他样式省略

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

放大模块的签名路径

uniapp实现电子签名功能_第6张图片

缩小模块的签名路径

uniapp实现电子签名功能_第7张图片

你可能感兴趣的:(vue.js,前端,uniapp)