一、安装使用
npm install vue-ele-sign --save-dev
二、页面引入使用
<template>
<div>
<div class="elesigncode-content">
<vue-ele-sign
ref="elesigncode"
direction="direction"
:pen="pen"
: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="getImg">获取图片</button>
<button @click="getFile">获取文件</button>
</div>
</div>
</div>
</template>
<script>
import VueEleSign from "vue-ele-sign";
export default {
components: {
VueEleSign,
},
data() {
return {
pen: "default",
imgType: "png",
readOnly: false,
direction: "left", //left :向左横屏
};
},
methods: {
setPen() {
this.pen = this.pen == "default" ? "writing" : "default";
},
onClear() {
// this.$refs.elesigncode.clear();
this.$refs.elesigncode.undo();
},
onClearSign() {
this.$refs.elesigncode.clearSign();
},
getImg() {
let isEmpty = this.$refs.elesigncode.isEmpty();
if (isEmpty) {
this.$message.error("请签名之后提交!");
} else {
this.$refs.elesigncode.getImg().then(res => {
console.log("图片地址1", res);
})
}
},
getFile() {
let isEmpty = this.$refs.elesigncode.isEmpty();
if (isEmpty) {
this.$message.error("请签名之后提交!");
} else {
this.$refs.elesigncode.getFile().then((res) => {
console.log("文件1", res);
});
}
},
},
};
</script>
<style scoped>
.elesigncode-content {
margin: 30px;
}
.sign {
border: 1px solid red;
}
</style>