vue 实现电子签名（关于vue |
您所在的位置：网站首页 › 怎么添加电子签名的水印 › vue 实现电子签名（关于vue |
vue 实现电子签名（关于vue
|
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 关于电子签名vue-esign插件的使用 前言一、效果如下二、使用步骤1.引入库2.读入数据 总结 前言在写一个校园类的系统时，有需求使用电子签名的功能，参考了很多不错的案例（文章后面有分享），所以就有了以下文章。 一、效果如下（跟参考链接长得差不多，其实大多都是这样，样式可自行修改） 代码如下（示例）： //使用npm或者yarn 加载vue-esign 的插件依赖 npm方式： npm install vue-esign --save yarn方式： yarn add vue-esign //在main.js中全局引入插件： import vueEsign from 'vue-esign' Vue.use(vueEsign) 2.读入数据代码如下（示例）： 重新签名 请在下方书写电子签名 重新签名 确定签名 import { httpAction, getAction } from '@/api/manage' import { validateDuplicateValue } from '@/utils/util' export default { name:'你的名字', data(){ return { model: {}, labelCol: { xs: { span: 24 }, sm: { span: 5 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 16 } }, confirmLoading: false, validatorRules: {}, lineWidth: 6,//画笔粗细 lineColor: '#000000',//画笔颜色 bgColor: '', //画布背景色，为空时画布背景透明 imgurl: '',//签名生成的图片 isCrop: false,//是否裁剪，在画布设定尺寸基础上裁掉四周空白部分 reset: true //清空画布的状态 } }, methods:{ //记录获取当前连接的后台地址：window._CONFIG['domianURL'] //清空画板.. handleReset() { this.$refs.esign.reset() this.imgurl = '' this.reset = true }, //生成签名图片.. handleGenerate() { this.$refs.esign .generate() .then(res => { this.imgurl = res this.model.signaturePicture = res this.reset = false }) .catch(err => { this.$message.error('请签名之后提交！') }) }, //将base64转换为文件.. dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], filename, { type: mime }) } } } .show-img { width: 30%; } .show-info { width: 100%; font-size: 16px; display: flex; align-items: center; justify-content: center; } .contro-container { width: 100%; height: 50px; display: flex; flex-direction: row; align-items: center; justify-content: space-around; position: absolute; bottom: 0px; } .qianming-container { width: 100%; height: 250px; margin: 20px auto; position: relative; } .text { font-size: 14px; } .item { margin-bottom: 18px; } .clearfix:before,.clearfix:after { display: table; content: ''; } .clearfix:after { clear: both; } .box-card { width: 95%; margin-left: 2.5%; } 总结用于自用的笔记记录，写的可能有些乱，希望能帮到你。 以下是参考链接 参考一，参考二，参考三 |
【本文地址】
今日新闻 |
推荐新闻 |