封装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>
Logo

前往低代码交流专区

更多推荐