Vue & Quasar - 共享自定義對話框組件

Question

我在另一個沒有任何答案的組件上查看了Reuse Quasar Dialog plugin with custom component ，我已經接近相同的問題，但我的結構化代碼有點不同。 在我的父母表格上，我有

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

我的個人資料對話框是一個表單，它是一個簡單的模板

         <template> 
            <q-stepper

似乎如果我將組件包裝在父頁面上，對話框將打開但我無法傳入

      prevent-close 

或添加一個

       @hide

我需要知道對話框何時關閉以保存更改或防止關閉，除非單擊按鈕。 即使在父級中添加防止關閉也不起作用

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

如果我在 q-dialog 中創建表單，那么它就變成了對話框中的對話框，並在關閉時將 v-modal 設置為 true，父表單仍然有輕微的灰色覆蓋，直到單擊頁面並且表單將無法打開第二次

Answer 1

您可以使用emit在配置文件對話框的事件通事件，讓你知道表單提交與否和使用持久性，使用戶無法關閉對話框，如果點擊它外面或者按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

轉到最后一步，單擊完成將觸發事件，您可以看到來自父組件的警報，並檢查控制台以獲取父組件顯示的數據。