安裝： npm install vue-esign --save
在main.js 中引入：
import vueEsign from 'vue-esign'
Vue.use(vueEsign)
頁面實現(xiàn)：
<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)// 畫布沒有簽字時會執(zhí)行這里'Not Signned'
????????? })
},
},
效果
