Есть ли способ предотвратить закрытие v-диалога? - PullRequest
Новая
       7

Есть ли способ предотвратить закрытие v-диалога?

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

Я использую компонент <v-dialog> для отображения формы для моего веб-приложения. Я хочу реализовать всплывающее диалоговое окно несохраненных изменений, когда пользователь прерывает свои изменения без сохранения, а затем закрывает / сохраняет диалоговое окно открытым в зависимости от нажатия кнопки. К сожалению, у меня куча проблем, когда я точно не могу понять, как предотвратить закрытие по умолчанию, выполняемое платформой.

Итак, из того, что я могу сказать, вы можете закрыть диалог тремя различными способами:

  1. Установка свойства v-model на false.
  2. Нажатие за пределами модального v-dialog, если для persistent prop не установлено значение true.
  3. Нажав клавишу escape.

Давайте не будем беспокоиться о втором способе закрытия диалогового окна, на которое я ссылался выше, и предположим, что оно установлено на true.

Подход № 1 :

Мой первый подход состоял в том, чтобы разрешить пользователям выходить из диалогового окна, только если они нажали кнопку отмены в форме. Я быстро наткнулся на препятствие, когда попытался отключить использование кнопки выхода.

Вот что я пробовал до сих пор: В моем приложении. vue mounted функция: 

mounted () {
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      console.log('The escape key was pressed.')
      e.preventDefault()
      e.returnValue = false
      e.stopImmediatePropagation()
    }
  })
}

Это должно работать. Сообщение журнала отображается на консоли, но диалоговое окно все еще закрывается после нажатия клавиши выхода. Я знаю, что я должен использовать здесь коды клавиш, но это ради удобства чтения. Я также пробовал keyup и keypress безуспешно. В фреймворке Vue. js или Vuetify это должно быть что-то нехорошее.

Подход № 2:

После того, как я потерпел неудачу с треском пытаясь отключить клавишу escape, мне пришлось попробовать что-то другое. Я попытался добавить этот код в функцию наблюдения, чтобы попытаться сохранить диалог открытым, если они были отменены: 

dialog (val) {
  if (val) {
    console.log('Dialog is true')
  } else if (!val && !confirm('Unsaved changes, do you still want to exit?')) {
    console.log('User Wants to Keep Dialog Open')
    this.dialog = true
  } else {
    console.log('Dialog is False')
    this.close()
  }
}

Когда я пытаюсь закрыть диалоговое окно, появляется сообщение о подтверждении, и я нажимаю кнопку отмены. Затем по какой-то причине открывается диалоговое окно подтверждения снова . Итак, я снова нажимаю «Отмена», затем диалог закрывается, как будто ничего не произошло. Вот что читает консоль:

Пользователь хочет, чтобы диалог оставался открытым Диалог это правда Пользователь хочет держать диалог открытым Диалог это правда

Я понимаю, почему снова вызывается метод просмотра диалогов, но я не понимаю, почему снова появляется диалоговое окно confirm. Этот код никогда не должен выполняться после отмены подтверждающего сообщения в первый раз. Сообщение журнала показывает, что код не должен выполняться снова. Что-то должно происходить за кулисами, чего я не понимаю.

У кого-нибудь есть опыт предотвращения закрытия компонента v-dialog? Или какая-нибудь помощь с моими двумя подходами? Заранее спасибо.

1 Ответ

2 голосов
/ 17 января 2020

Это свойство в диалоговом окне: 

<v-dialog persistent

Это заставит их держать его открытым, если вы не вызовете замыкание программно, переключая модель.

...