vue 电子签名插件

1.安装

 npm install vue-esign --save 

2.main.js全局引入

import vueEsign from 'vue-esign'
Vue.use(vueEsign)

 3.调用组件的两个内置方法 reset() 和 generate()

4.页面代码 

<template>
  <div class="HelloWorld">
    <div style="border: 2px solid #e6e6e6; background-color: white">
      <vue-esign
        ref="esign"
        :width="800"
        :height="300"
        :isCrop="isCrop"
        :lineWidth="lineWidth"
        :lineColor="lineColor"
        :bgColor.sync="bgColor"
      />
    </div>
    <button @click="handleReset">清空画板</button>
    <button @click="handleGenerate">生成图片</button>
    电子签名：
    <img
      :src="resultImg"
      alt=""
      :style="resultImg !== null ? 'width: 100px; height: 70px' : ''"
    />
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      lineWidth: 6,
      lineColor: 'red',
      bgColor: '',
      resultImg: '',
      isCrop: false
    }
  },
  methods: {
    handleReset() {
      this.$refs.esign.reset()
    },
    // 生成base64格式
    handleGenerate() {
      this.$refs.esign
        .generate()
        .then((res) => {
          this.resultImg = res //把base64赋给img
          console.log(this.resultImg)
        })
        .catch((err) => {
          alert(err) // 画布没有签字时会执行这里
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

 5.页面效果