效果
安装:
npm install vue-esign --save
使用:
<template>
<div class="esign">
<vue-esign class="sign1" ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
<div class="esigh-btns">
<button @click="handleReset">清空画板</button>
<button @click="handleGenerate">确认</button>
</div>
<img class="esigh-result" v-if="resultImg" :src="resultImg" alt="" />
</div>
</template>
<script>
import vueEsign from 'vue-esign'
export default {
components: { vueEsign },
data() {
return {
lineWidth: 6, // 画笔粗细
lineColor: "#000000", // 画笔颜色
bgColor: "", // 画布背景色,为空时画布背景透明
isCrop: false, // 是否裁剪, 在画布设定尺寸基础上裁掉四周空白部分
resultImg: "", //
};
},
methods: {
handleReset() {
this.$refs.esign.reset();
},
handleGenerate() {
this.$refs.esign.generate().then((res) => {
console.log(res); // base64图片
this.resultImg = res;
})
},
},
}
</script>
<style lang="less" 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-result {
margin-top: 10px;
display: block;
max-width: 50%;
height: 50%;
margin: auto;
left: 50%;
transform: rotateX(50%);
border: 1px solid #ececee;
}
}
</style>