安裝：
npm install vue-esign --save
使用：
? ?1. main.js 中引入
?importvueEsignfrom'vue-esign?'
?Vue.use(vueEsign)
? ? 2.頁面中使用?必須設(shè)置?ref?，用來調(diào)用組件的兩個內(nèi)置方法?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) // 畫布沒有簽字時會執(zhí)行這里 'Not Signned'
? ? })
? }
}
