VUE实现鼠标签名
1.首先，安装 vue-esign```
npm install vue-esign --save
```
2.首先，在main.js中引入
```
import vueEsign from 'vue-esign'
Vue.use(vueEsign)
```
3.在 组件 中写入
```
<template>
<div class="esign">
<div class="esign-box">
<vue-esign
class="sign1"
ref="esign"
:width="800"
:height="300"
:isCrop="isCrop"
:lineWidth="lineWidth"
:lineColor="lineColor"
:bgColor.sync="bgColor"
/>
</div>
<div class="esigh-btns">
<button @click="handleReset">清空画板</button>
<button @click="handleGenerate">确认</button>
</div>
<div class="esigh-result">
<img v-if="resultImg" :src="resultImg" alt="" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
lineWidth: 6,
lineColor: "#000000",
bgColor: "",
resultImg: "",
isCrop: false,
borders: "1px solid red",
};
},
methods: {
handleReset() {
this.$refs.esign.reset();
},
handleGenerate() {
this.$refs.esign
.generate()
.then((res) => {
this.resultImg = res;
})
.catch((err) => {
alert(err);
// 画布没有签字时会执行这里 'Not Signned'
});
},
},
}
</script>
<style scoped>
.esign {
max-width: 1000px;
margin: auto;
padding: 10px;
border: 1px solid rebeccapurple;
}
.esigh-btns button {
color: #fff;
height: 40px;
width: 100px;
font-size: 16px;
margin-right: 10px;
outline: none;
border-radius: 4px;
background: #f60;
border: 1px solid transparent;
}
.esigh-btns button:active {
color: #fff;
box-shadow: 0px 0px 50px orangered inset;
}
.esigh-result {
margin-top: 10px;
}
.esigh-result img {
display: block;
/* max-width: 100%; */
/* height: auto; */
max-width: 50%;
height: 50%;
margin: auto;
left: 50%;
transform: rotateX(50%);
border: 1px solid #ececee;
}
.esignature {
margin: 10px 0;
border: 2px solid #ccc;
}
</style>
```
4.在父组件中使用即可
效果截图：
页:
[1]