签名、画板

安装画板插件vue-esign

npm install vue-esign --save

封装成组件

<template>
  <div class="vue-esign">
    <vue-esign style="border:1px solid #000;" ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
    <img :src="resultImg" alt="">
    <button @click="handleReset">重写</button>
    <button @click="handleGenerate">确认</button>
  </div>
</template>

<script>
import vueEsign from 'vue-esign';
export default {
  components: {vueEsign},
  data () {
  return {
    lineWidth: 6,
    lineColor: '#000000',
    bgColor: '',
    resultImg: '',
    isCrop: false
  }
},
methods: {
  handleReset () {
    this.$refs['esign'].reset() //清空画布
  },
  handleGenerate () {
    this.$refs['esign'].generate().then(res => {
      console.log(res)
      this.resultImg = res // 得到了签字生成的base64图片
    }).catch(err => { //  没有签名，点击生成图片时调用
      console.log(err) // 画布没有签字时会执行这里 'Not Signned'
    })
  }
}
}
</script>

<style>
.vue-esign {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height: 100%;
  /* margin-top: 60px; */
}
</style>