安装：
npm install vue-esign --save
使用：
1. main.js 中引入
importvueEsignfrom'vue-esign '
Vue.use(vueEsign)
2.页面中使用 必须设置 ref ，用来调用组件的两个内置方法 reset() 和 generate()
<el-row>
<el-col :span="3" style="display: flex;">
<div class="esign-group">
<label>画笔粗细：</label>
<el-select v-model="lineWidth" placeholder="请选择" size="small">
<el-option key="2" label="2" value="2"></el-option>
<el-option key="4" label="4" value="4"></el-option>
<el-option key="6" label="6" value="6"></el-option>
<el-option key="8" label="8" value="8"></el-option>
<el-option key="10" label="10" value="10"></el-option>
</el-select>
</div>
</el-col>
<el-col :span="3">
<div class="esign-group">
<label>画笔颜色：</label>
<el-color-picker v-model="lineColor" size="small"></el-color-picker>
</div>
</el-col>
<el-col :span="3">
<div class="esign-group">
<label>画布背景：</label>
<el-color-picker v-model="bgColor" size="small"></el-color-picker>
</div>
</el-col>
<el-col :span="3">
<div class="esign-group">
<label>是否裁剪：</label>
<el-switch
v-model="isCrop">
</el-switch>
</div>
</el-col>
</el-row>
<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
<el-button type="primary" size="small" @click="handleReset">清空画板</el-button>
<el-button type="success" size="small" @click="handleGenerate">生成图片</el-button>
data () {
return {
lineWidth: 6,
lineColor: '#000000',
bgColor: '',
resultImg: '',
isCrop: false
}
},
methods: {
handleReset () {
this.$refs.esign.reset()
},
handleGenerate () {
this.$refs.esign.generate().then(res => {
this.resultImg = res
}).catch(err => {
alert(err) // 画布没有签字时会执行这里 'Not Signned'
})
}
}
