vue2移动端电子手签封装

使用到了vant-ui和canvas

html部分

<template>
  <div>
    <div style="border: 1px solid #eee" ref="canvasBox">
      <canvas class="canvasId" />
    </div>
    <div class="btnBox">
      <van-button round plain color="#396cd1" @click="clear">{{lang=='cn'?'重签\nre-sign':'re-sign'}}</van-button>
      <van-button round color="#396cd1" @click="save">{{lang=='cn'?'确定\nconfirm':'confirm'}}</van-button>
    </div>
  </div>
</template>

js部分

<script>
import SignaturePad from 'signature_pad'
import { Button, Notify } from 'vant'
import { mapGetters } from 'vuex'
export default {
  name: 'signature',
  components: {
    [Button.name]: Button,
    [Notify.Component.name]: Notify.Component
  },
  data () {
    return {
      SignaturePad: null,
      config: {
        penColor: '#000000', // 笔刷颜色
        minWidth: 3 // 最小宽度
      }
    }
  },
  computed: {
    ...mapGetters(['lang'])
  },
  mounted () {
    this.getCanvas()
  },
  methods: {
    getCanvas () {
      var canvas = document.querySelector('.canvasId')
      this.signaturePad = new SignaturePad(canvas, this.config)
      canvas.height = 200
      canvas.width = this.$refs.canvasBox.clientWidth
    },
    base64ToFile (base64, fileName) {
      const arr = base64.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const bytes = atob(arr[1])
      let n = bytes.length
      const ia = new Uint8Array(n)
      while (n--) {
        ia[n] = bytes.charCodeAt(n)
      }
      return new File([ia], fileName, { type: mime })
    },
    // 保存
    save () {
      // 默认保存为png格式
      if (this.signaturePad.isEmpty()) {
        Notify({ type: 'danger', message: '电子签名不能为空' })
      } else {
        this.$emit('setSign', this.signaturePad.toDataURL())
      }
    },
    // 清除
    clear () {
      // 清除画布内容
      this.signaturePad.clear()
    }
  }
}
</script>

css部分

<style scoped lang="scss">
.btnBox {
  padding: 10px;
  text-align: center;
  display: flex;
  justify-content: center;
  .van-button {
    width: 34%;
    height: 4.2rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  /deep/ .van-button--info {
    height: 2.4rem;
    padding: 0 2.4rem;
    &:first-child {
      margin-right: 2.4rem;
    }
  }
}
</style>