npm i vue-ele-sign --save-dev
<div class="elesigncode-content">
<vue-ele-sign ref="elesigncode" direction="direction" :pen="pen" :bgImg="bgImg" :imgType="imgType" :readOnly="readOnly" :vsConsole="true" class="sign" />
<div class="btn-box">
<button @click="setPen">切换画笔</button>
<button @click="onClear">清空</button>
<button @click="onClearSign">清空签名</button>
<button @click="setBgImg">设置背景图片</button>
<button @click="getImg">获取图片</button>
<button @click="getFile">获取文件</button>
<button @click="onIsEmpty">是否有签名</button>
</div>
</div>
import VueEleSign from 'vue-ele-sign'
export default {
components: {
backtop,
VueEleSign
},
data() {
return {
show: true,
pen: 'default',
imgType: 'png',
readOnly: false,
direction: 'left',
imgUrl: '',
bgImg: ''
}
},
methods: {
setPen() {
this.pen = this.pen == 'default' ? 'writing' : 'default'
},
onClear() {
this.$refs.elesigncode.clear()
},
onClearSign() {
this.$refs.elesigncode.clearSign()
},
setBgImg() {
this.$refs.elesigncode.setBgImg(this.bgImg)
},
getImg() {
this.$refs.elesigncode.getImg().then(res => {
console.log('图片地址1', res)
this.bgImg = res
})
},
getFile() {
this.$refs.elesigncode.getFile().then(res => {
console.log('文件1', res)
})
},
onIsEmpty() {
let isEmpty = this.$refs.elesigncode.isEmpty()
console.log('isEmpty--', isEmpty)
}
}
}
.elesigncode-content {
margin: 30px;
}
.sign {
border: 1px solid red;
}
效果
