Vue电子签名板

Vue电子签名板

1.安装vue电子前面组件

npm install vue-esign --save

2.在main.js中引入组件

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

3.Demo模板

<template><div class="esignTest"><div style="border: 2px solid #E6E6E6 ;background-color: white"><--自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色--><vue-esignref="esign":width="800":height="300":is-crop="isCrop":line-width="lineWidth":line-color="lineColor":bg-color.sync="bgColor"/></div><button @click="handleReset">清空画板</button><button @click="handleGenerate">生成图片</button>签字结果：<img :src="resultImg" width="200" height="100" alt=""></div>
</template>
<script>export default {name:'EsignTest',data() {return {lineWidth: 6,lineColor: '#000000',bgColor: '',resultImg: '',isCrop: false}},methods:{handleReset() {this.$set()},handleGenerate() {this.$ate().then(res => {sultImg = res}).catch(err => {alert(err) // 画布没有签字时会执行这里 'Not Signned'})}}}</script>