在前面随笔介绍了《在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理》的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一般通过签名表的方式(银行很常见)实现电子签名的处理。本篇随笔介绍如何基于Vue &Element前端的技术实现电子签名的处理。
我们知道,很多常见的功能,我们都会引入对应的组件来做页面功能,会非常简洁方便,毕竟不用重复制造轮子。
我们在Github上可以找到很多基于Vue前端技术的界面组件,其中实现电子签名的也有好几个,大多数处理界面和功能差不多。
如vue-sign-canvas,它也是基于写字或者签名模式来实现电子签名的处理,案例可以参考地址:https://langyuxiansheng.github.io/vue-sign-canvas/。
案例本身就是一个很好的例子,提供了很多配置属性来实现不同的效果。
而vue-esign也是另一款实现个人电子签名处理的组件,也提供了类似的功能。
npm install vue-esign --save
data () {
return {
lineWidth: 6,
lineColor: '#000000',
bgColor: '',
resultImg: '',
isCrop: false
}
},
methods: {
handleReset () {
this.$refs.esign.reset()
},
handleGenerate () {
this.$refs.esign.generate().then(res => {
this.resultImg = res
}).catch(err => {
alert(err) // 画布没有签字时会执行这里 'Not Signned'
})
}
}
界面效果如下所示。
本篇随笔基于vue-esign来实现电子签名处理。
在页面中引入对应的电子签名组件
import Vue from 'vue'
import vueEsign from 'vue-esign' // 电子签名
export default {
name: 'Signature',
components: {
vueEsign
},
在页面HTML代码中,放置一块区域来实现电子签名,引入Vue-esign组件,如下代码所示。
methods: {
// 清空画布
handleReset () {
this.resultImg = ''
this.showSig = true;
this.$nextTick(() => {
this.$refs.esign.reset()
})
},
//生成签名图片
handleGenerate () {
this.$refs.esign.generate().then(res => {
if (res) {
this.showSig = false;
this.resultImg = res;
}
}).catch(err => {
this.$message({
message: '请签名',
type: 'warning'
});
})
},
最后得到界面效果如下所示。
由于电脑没有签名笔,因此使用鼠标胡乱画的名字,效果一般,呵呵。
如果使用签名笔来实现模拟真实的签名,其实和书写效果就很接近了,因此也可以作为一般的个人签章处理。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章