安装： npm install vue-esign --save
在main.js 中引入：
import vueEsign from 'vue-esign'
Vue.use(vueEsign)
页面实现：
<div class="esignTest">
<!-- 头部配置栏-->
<div class="header">
<el-form ref="form" label-width="80px" :inline="true">
<el-form-item label="画笔粗细">
<el-input v-model="lineWidth">
<el-form-item label="颜色">
<el-input v-model="lineColor">
<el-form-item label="画布背景">
<el-input v-model="bgColor">
<el-form-item label="是否裁剪">
<el-switch v-model="isCrop">
<vue-esign ref="esign"
:width="800"
:height="300"
:isCrop="isCrop"
:lineWidth="lineWidth"
:lineColor="lineColor"
:bgColor="bgColor" />
<div style="margin-top: 15px">
<el-button type="primary" @click="handleReset">清空画板
<el-button type="success" @click="handleGenerate">生成图片
</div>
js:
data () {
return {
lineWidth:2,
lineColor:'#000000',
bgColor:'#e5e5e5',
resultImg:'',
isCrop:true,
content:'',
editorOption: {},
params: []
}
},
methods: {
handleReset () {//清空画板
this.$refs.esign.reset()
//还原默认值
this.resultImg =''
this.lineColor ='#000000'
this.bgColor ='#e5e5e5'
this.lineWidth ='2'
},
handleGenerate () {
this.$refs.esign.generate().then(res => {
this.resultImg = res
}).catch(err => {
alert(err)// 画布没有签字时会执行这里'Not Signned'
})
},
},
效果
