移动端实现电子签名 ＜VueSignaturePad＞

新建 一个 电子签名的文件 

然后配合弹窗去做

    
      
请将手机横置，进行正楷签名
      
      

        签字确认下发
      
    

import sign from '@/views/sign/index.vue'
  components: {
    sign
  },


 showPickerSign: false,

  signList: [{ data: '', index: 0, isEmpty: true }],



  signSave(data) {    //点击保存
      this.hsSign = data.data   得到 签名的 base64 数据地址
      localStorage.setItem('hsSign', JSON.stringify(data.data))  //可以保存数据
      // 使用 splice 方法来更新 signList 数组中的元素
      this.signList.splice(data.index, 1, data)
    },

  signAdd(data) {
      // 使用 splice 方法来更新 signList 数组中的元素
      this.signList.splice(data.index, 1, data)
    },

 conSign() {
      if (this.signList[0].isEmpty) {
        this.$toast('请先保存签名')
        // return
      } else {
        this.$api.dangerFormSubmit(this.formInformation).then(res => {
          if (res.success) {
            this.$toast.success('提交成功')
            this.$router.replace('/home')
          }
        })
        this.showPickerSign = false
      }
    },

利用   this.showPickerSign = true 来控制电子签名的开关 比如 表单填写完成后下一步流程 电子签名   this.showPickerSign = true  签完名 保存   this.showPickerSign = false 关闭电子签名