安装画板插件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>