vue2实现手写签批

1. 使用案例图

一、安装

npm i vue-signature-pad@2.0.5   // vue2适用的版本

二、引入

*mian.js*
import VueSignaturePad from 'vue-signature-pad'

Vue.use(VueSignaturePad)

三、使用 vue-signature-pad 完成签批功能

<template>
  <div id="app">
    <div style="background: #fff">
      <vue-signature-pad
        id="signature"
        width="95%"
        height="400px"
        ref="signaturePad"
        :options="options"
      />
    </div>

    <button @click="save">保存</button>
    <button @click="resume">重置</button>
  </div>
</template>

<script>
export default {
   
  name: 'App',
  data() {
   
    return {
   
      options: {
   
        penColor: '#000',
      },
    }
  },
  methods: {
   
    save() {
   
      const {
    isEmpty, data } = this.$refs.signaturePad.saveSignature()
      console.log(isEmpty)
      console.log(data)
    },

    //清除重置
    resume() {
   
      this.$refs.signaturePad.clearSignature()
    },
  },
}
</script>

<style lang="scss">
html,
body {
   
  padding: 0;
  margin: 0;
}
#app {
   
  width: 100vw;
  height: 100vh;
  background: #ececec;
}
</style>

四、解构出data为base64编码的图片

<template>
  <div id="app">
    <div style="background: #fff">
      <vue-signature-pad
        id="signature"
        width="95%"
        height="300px"
        ref