【bug】关于Vue封装el-dialog对话框关闭无反应问题
封装dialog弹窗
·
封装dialog弹窗,遇到个问题,关闭的时候,在弹窗内部关闭事件里写了控制弹窗开关的属性为false,结果关闭之后就再也打不开了
百度下,应该是弹窗无法自己关闭自己,通过$emit触发父组件中弹窗开关的属性为false就可以解决
1、父组件的子组件,:open=“invoiceSheet”,
<InvoiceentryDialog
ref="InvoiceentryDialog"
:open="invoiceSheet"
></InvoiceentryDialog>
2、子组件接收open的值
props: {
// dialog显示隐藏
open: {
type: Boolean,
default: false,
},
},
3、子组件data中
data() {
return {
// // 弹窗开关
invoiceSheet: this.open,
};
},
4、子组件watch
watch: {
open(newVal) {
this.invoiceSheet = newVal;
},
},
5、子组件的dialog上,关键性的就是@close=“$emit(‘close-dialog’)”
<el-dialog
title="xxx"
:visible.sync="invoiceSheet"
@close="$emit('close-dialog')"
:close-on-click-modal="false"
width="80%"
left
>
6父组件的子组件上,关键性 @close-dialog=“invoiceSheet = false”
<InvoiceentryDialog
ref="InvoiceentryDialog"
:open="invoiceSheet"
@close-dialog="invoiceSheet = false"
></InvoiceentryDialog>
更多推荐
已为社区贡献35条内容
所有评论(0)