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

新建 一个 电子签名的文件 

<template>
  <div class="main">
    <VueSignaturePad width="100%" height="400px" style="border: 1px dashed #ccc" ref="signaturePad" />
    <div class="btn-wrap">
      <van-button color="#3370FF" @click="save" block type="info">保存</van-button>
      <van-button @click="undo" block type="default">撤销</van-button>
      <van-button @click="add" block type="default">增加签名人</van-button>
    </div>
  </div>
</template>

<script>
import { VueSignaturePad } from 'vue-signature-pad'
export default {
  components: { VueSignaturePad },
  props: {
    index: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      signIndex: this.index
    }
  },
  mounted() { },
  methods: {
    undo() {
      this.$refs.signaturePad.undoSignature()
    },
    save(showtip = true) {
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature()
      if (isEmpty) {
        this.$toast('请先签名')
      } else {
        if (showtip) {
          this.$toast.success('签名保存成功')
        }
        this.$emit('save', { isEmpty, data, index: this.signIndex })
      }
    },
    add() {
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature()
      if (isEmpty) {
        this.$toast('请先签名')
      } else {
        this.save(false)
        this.$emit('add', { isEmpty: true, data: '', index: this.signIndex + 1 })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  background: #fff;
  padding: 16px;
}

.btn-wrap {
  display: flex;
  gap: 12px;
  padding: 12px 0;
}
</style>

然后配合弹窗去做

    <van-popup v-model="showPickerSign" round position="bottom" :close-on-click-overlay="true">
      <div class="tip">请将手机横置，进行正楷签名</div>
      <sign v-for="(item, index) in signList" :key="item.index" :index="index" @save="signSave" @add="signAdd" />
      <div class="btn-wrap">
        <van-button color="#3370FF" style="font-weight: bold" @click="conSign" block type="info">签字确认下发</van-button>
      </div>
    </van-popup>

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 关闭电子签名