vue使用vue-signature-pad实现电子签名

公司项目新需求要增加客户触摸屏签字确认功能，网上找了vue-signature-pad和vue-esign 对比下 决定用vue-signature-pad 因为他带笔压！就类似数位板画画的压感 画笔线条不是固定粗细的

我这贫乏的语言组织能力 还是看对比图吧

使用方法：
1.下载依赖
项目是3.0的 一开始还担心不能用 亲测安装最新版本是可以用地~

npm install --save vue-signature-pad

2.main.js里引入 use一下

import Vue from 'vue'
import VueSignaturePad from "vue-signature-pad";
Vue.use(VueSignaturePad);

3.使用

<el-row :gutter="24" type="flex" justify="center" style="height: 350px;">
  <div style="width:780px;">
    <vue-signature-pad class="signature" width="95%" height="300px" ref="signaturePad" :options="options"/>
  </div>
  <el-col>
    <el-button class="signature-btn" @click="undoOperation">撤销</el-button>
    <el-button class="signature-btn" @click="reset">重置</el-button>
  </el-col>
</el-row> 

methods

// 撤销
  undoOperation() {
    this.$refs.signaturePad.undoSignature();
  },

  // 重置
  reset() {
    this.$refs.signaturePad.clearSignature();
  },
  
  // 确定按纽
 confirm() {
    let { isEmpty, base64 } = this.$refs.signaturePad.saveSignature();
    console.log(isEmpty); // 签名是否为空
    console.log(base64); // 签名的base64
  },

css

 .signature {
    border: 1px solid #424242;
  }
  
  .signature-btn {
    width: 100px;
    height: 40px;
    font-size: 20px;
    color: #5e5e5e;
  }

签名生成的base64转图片

他还能设置画笔粗细和颜色 我这里没有用到