Vue & Quasar - 共享自定义对话框组件

Question

我看过 Reuse Quasar Dialog plugin with custom component on another component 没有任何答案，我有接近相同的问题，但我的结构化代码有点不同。在我的 parent 表格上我有

        <q-dialog prevent-close v-model="showProfileForm" class="profileDialog">
        <profile-dialog></profile-dialog>
        </q-dialog>

我的 profile-dialog 是一个表单，它是一个简单的模板

         <template> 
            <q-stepper

似乎如果我将组件包装在 parent 页面上，对话框将打开，但我无法传入

      prevent-close

或添加一个

       @hide

我需要知道对话框何时关闭以保存更改或防止关闭，除非单击按钮。即使在 parent 中添加 prevent-close 也不起作用

   <q-dialog prevent-close v-model="showProfileForm" class="profileDialog">
   <profile-dialog></profile-dialog>
   </q-dialog>

如果我在 q-dialog 中创建表单，那么它会变成对话框中的对话框，并在关闭时将 v-modal 设置为 true parent 表单仍然有轻微的灰色覆盖，直到单击页面并且表单不会再次打开

Answer 1

您可以在配置文件对话框中使用 emit 事件作为 pass 事件，这样您就可以知道表单是否已提交，并使用持久性，这样用户就无法在单击对话框外部或按 ESC 键时关闭对话框；此外，应用程序路由更改不会关闭它。

   <q-btn v-if="step == 4" @click="FinishClick" color="primary" label="Finish"/>



    methods: {
        FinishClick() {
            alert("Finish Click From Profile Dialog");
            this.$emit("profile_dialog_emmit",{'MSG':'TestData'})
        }
    }

  <profile-dialog @profile_dialog_emmit="my_fun($event)"></profile-dialog>

在父组件中。

methods:{
    my_fun(data){
        console.log("Assad");
        alert("From Index Check Console for Data");
        console.log(data)
        this.showProfileForm=false;
    }
  }

演示 - https://codesandbox.io/s/clever-kilby-qf1gz

转到最后一步并单击完成将触发事件，您可以看到来自父组件的警报并检查控制台以获取父组件显示的数据。

Vue & Quasar - 共享自定义对话框组件

Vue & Quasar - Sharing a custom dialog component

javascript

vue.js

quasar-framework