<template>
<!-- 签名版 -->
<div class="signature-edition">
<el-dialog title="签名版" :visible.sync="dialogVisible" width="50%">
<div class="signature-edition-content">
<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth"
:lineColor="lineColor" />
</div>
<div slot="footer" class="dialog-footer">
<custom-button confirmText="取消" type="cancel" @click.native="dialogVisible = false"></custom-button>
<custom-button confirmText="重新签名" type="confirm" @click.native="handleReset"
style="margin:0 .25rem"></custom-button>
<custom-button confirmText="确定" type="confirm" @click.native="handleGenerate"></custom-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'SignatureEdition',
data() {
return {
dialogVisible: false,
lineWidth: 6,
lineColor: '#000000',
bgColor: '#F8F8F8',
resultImg: '',
isCrop: false
}
},
methods: {
show() {
this.dialogVisible = true;
},
close() {
this.dialogVisible = false;
},
handleReset() {
this.$refs['esign'].reset() //清空画布
},
handleGenerate() {
this.$refs['esign'].generate().then(res => {
this.resultImg = res // 得到了签字生成的base64图片
console.log(111, this.resultImg);
}).catch(err => { // 没有签名,点击生成图片时调用
this.$message({
message: err + ' 未签名!',
type: 'warning'
})
alert(err) // 画布没有签字时会执行这里 'Not Signned'
})
}
}
}
</script>
<style lang="scss">
.signature-edition {
.el-dialog {
border-radius: .25rem;
}
.el-dialog__title {
font-weight: bold;
color: #000000;
}
.signature-edition-content {
background-color: #F8F8F8;
>div {
&:first-child {
color: #000000;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: .25rem;
>span {
&:first-child {
font-weight: bold;
font-size: 16px;
color: #000000;
}
&:last-child {
font-size: 16px;
color: #999999;
}
}
}
&:not(:first-child) {
font-weight: bold;
font-size: 14px;
color: #000000;
line-height: 2;
}
}
}
.dialog-footer {
display: flex;
align-items: center;
justify-content: center;
}
}
</style>
vue2签名版、画板 组件
最新推荐文章于 2024-07-29 17:09:37 发布