Vue & Quasar - Обмен пользовательским компонентом диалога - PullRequest
Новая
       10

Vue & Quasar - Обмен пользовательским компонентом диалога

0 голосов
/ 07 января 2020

Я смотрел на Повторно использовать плагин Quasar Dialog с пользовательским компонентом на другом компоненте , на который нет ответов, и у меня близок тот же вопрос, но структурированный код немного отличается. В моей родительской форме у меня есть 

        <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-диалога, он становится диалогом внутри диалога и устанавливает для v-modal значение true, когда оно закрывает, родительская форма по-прежнему имеет небольшое серое наложение до тех пор, пока страница не будет нажата и форма не откроется во второй раз

1 Ответ

1 голос
/ 08 января 2020

Вы можете использовать событие emit в диалоге профиля для передачи события, чтобы вы знали, что форма отправлена ​​или нет, и использовать постоянную, чтобы пользователь не мог закрыть диалоговое окно, если щелкнул за пределами или нажал клавишу ES C; Кроме того, изменение маршрута приложения не приведет к его отклонению. 

   <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

Go до последнего шага и нажатие на финиш sh вызовет событие и вы увидите предупреждение из родительского компонента и проверьте консоль на наличие данных, отображаемых из родительского компонента.

...