最近需要实现web端手写签名的功能，找了半天，没有完全符合现有需求的插件，便基于elesigncode的代码二次处理，正好方便可以随时根据需求修改，点击vue-ele-sign跳转（只保留了适配vue框架功能），有其他需求，建议直接看elesigncode源码，elesigncode兼容了jq引入
安装依赖命令
npm i vue-ele-sign --save-dev
使用例子（可查看App.vue文件）
<div class="elesigncode-content">
<vue-ele-sign ref="VueEleSign"
direction="direction"
:pen="pen"
:bgImg="bgImg"
:imgType="imgType"
:readOnly="readOnly"
:vsConsole="true"/>
<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>
</div>
...
import VueEleSign from 'vue-ele-sign'
export default {
components: { VueEleSign }
data() {
return {
show: true,
pen: 'default',
imgType: 'png',
readOnly: false,
direction: 'left', //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)
}
}
}
