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

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

npm install vue-esign --save

在main.js中引入

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

    <div class="box"><vue-esignclass="back"ref="esign":width="500":height="400":isCrop="isCrop":lineWidth="lineWidth":lineColor="lineColor":bgColor.sync="bgColor"/><imgclass="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.$set()sultImg = ''},handleGenerate () {this.$ate().then(res => {console.log(sultImg = res}).catch(err => {console.log(err)})}},
}

github地址：