记录一次Vue中用Canvas制作一个签名面板（插件）

npm install vue-esign --save

在main.js中引入

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

<div class="box">
      <vue-esign
        class="back"
        ref="esign"
        :width="500"
        :height="400"
        :isCrop="isCrop"
        :lineWidth="lineWidth"
        :lineColor="lineColor"
        :bgColor.sync="bgColor"
      />
      <img
        class="img"
        :src="resultImg"
        alt=""
      />
    </div>
    <button @click="handleReset">清空画板</button>
    <button @click="handleGenerate">生成图片</button>

export default {
  name: 'HelloWorld',
  data () {
    return {
      lineWidth: 3,
      lineColor: 'red',
      bgColor: '',
      resultImg: '',
      isCrop: false
    }
  },
  methods: {
    handleReset () {
      this.$refs.esign.reset()
      this.resultImg = ''
    },
    handleGenerate () {
      this.$refs.esign.generate().then(res => {
        console.log(res)
        this.resultImg = res
      }).catch(err => {
        console.log(err)
      })
    }
  },
}

github地址：​​https://github.com/JaimeCheng/vue-esign​​