0

在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理

 2 years ago
source link: https://www.cnblogs.com/wuhuacong/p/16033987.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

在前面随笔介绍了《在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理》的处理，有的时候，我们在流程中或者一些文件签署的时候，需要签上自己的大名，一般通过签名表的方式（银行很常见）实现电子签名的处理。本篇随笔介绍如何基于Vue &Element前端的技术实现电子签名的处理。

1、实现电子签名的组件

我们知道，很多常见的功能，我们都会引入对应的组件来做页面功能，会非常简洁方便，毕竟不用重复制造轮子。

我们在Github上可以找到很多基于Vue前端技术的界面组件，其中实现电子签名的也有好几个，大多数处理界面和功能差不多。

如vue-sign-canvas，它也是基于写字或者签名模式来实现电子签名的处理，案例可以参考地址：https://langyuxiansheng.github.io/vue-sign-canvas/。

案例本身就是一个很好的例子，提供了很多配置属性来实现不同的效果。

而vue-esign也是另一款实现个人电子签名处理的组件，也提供了类似的功能。

npm install vue-esign --save
<!-- vue2 -->
<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
<!-- vue3 -->
<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" v-model:bgColor="bgColor" />

<!-- isClearBgColor为false时，不必再给bgColor加sync修饰符或v-model -->

<button @click="handleReset">清空画板</button> 
<button @click="handleGenerate">生成图片</button>
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来实现电子签名处理。

2、在页面中实现电子签名

在页面中引入对应的电子签名组件

import Vue from 'vue'
import vueEsign from 'vue-esign' // 电子签名

export default {
  name: 'Signature',
  components: {
    vueEsign
  },

在页面HTML代码中，放置一块区域来实现电子签名，引入Vue-esign组件，如下代码所示。

  <div class="sigbut">
    <div class="tip">请在这里签名</div>
    <div class="left-bu">
      <el-button class="clear-bu" size="mini" @click="handleReset">清空签名</el-button>
      <el-button class="sure" size="mini" :disabled="!showSig" @click="handleGenerate">确定签名
      </el-button>
    </div>
  </div>
  <div class="sig">
    <vue-esign v-if="showSig" ref="esign" :width="800" :height="150" :is-crop="isCrop" :line-width="lineWidth"
      :line-color="lineColor" :bg-color.sync="bgColor" />
    <img v-if="!showSig" :src="resultImg" alt="" class="sig-img">
  </div>
  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'
        });
      })
    },

最后得到界面效果如下所示。

 由于电脑没有签名笔，因此使用鼠标胡乱画的名字，效果一般，呵呵。

如果使用签名笔来实现模拟真实的签名，其实和书写效果就很接近了，因此也可以作为一般的个人签章处理。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK