一、安装vue-esign
cnpm i vue-esign --save
二、引入vue-esign 在main.js中
// 生成签名插件
import vueEsign from 'vue-esign'
Vue.use(vueEsign)
三、定义画板和按钮
<div>
<vue-esign style="border:2px solid #000" ref="esign" :width="500" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
<button @click="handleReset">清空画板</button>
<button @click="handleGenerate">生成图片</button>
</div>
四、定义画笔样式
data () {
return {
lineWidth: 6,
lineColor: '#000000',
bgColor: '',
resultImg: '',
isCrop: false
}
},
五、定义方法
// 清空画板
handleReset () {
this.$refs.esign.reset()
},
// 生成图片
handleGenerate () {
this.$refs.esign.generate().then(res => {
this.resultImg = res;
console.log(res)
}).catch(err => {
alert(err)
})
}