QDialog модальные окна

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

QDialog может использоваться в двух основных режимах: императивном и декларативном.

Декларативный режим

В декларативном подходе QDialog добавляется напрямую в шаблон компонента Vue. Управление его видимостью осуществляется через привязку к переменной состояния:

<template>
  <q-btn label="Открыть диалог" @click="dialog = true" />
  <q-dialog v-model="dialog">
    <q-card>
      <q-card-section>
        Подтвердите действие
      </q-card-section>
      <q-card-actions align="right">
        <q-btn flat label="Отмена" v-close-popup />
        <q-btn flat label="OK" color="primary" @click="confirmAction" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialog: false
    };
  },
  methods: {
    confirmAction() {
      console.log('Действие подтверждено');
      this.dialog = false;
    }
  }
};
</script>

Ключевые моменты декларативного подхода:

Использование v-model связывает видимость диалога с переменной состояния.
v-close-popup закрывает диалог автоматически без необходимости вручную изменять переменную.
QDialog может содержать любые дочерние компоненты, обычно используется с QCard для структурированного отображения контента.

Императивный режим

Императивный способ подходит для вызова модальных окон из методов без предварительного размещения их в шаблоне. Используется статический метод this.$q.dialog().

methods: {
  showDialog() {
    this.$q.dialog({
      title: 'Подтверждение',
      message: 'Вы действительно хотите удалить элемент?',
      cancel: true,
      persistent: true
    }).onOk(() => {
      console.log('Элемент удалён');
    }).onCancel(() => {
      console.log('Действие отменено');
    }).onDismiss(() => {
      console.log('Диалог закрыт');
    });
  }
}

Особенности императивного вызова:

Параметры конфигурации включают title, message, html, ok, cancel, persistent.
Методы onOk, onCancel, onDismiss позволяют отслеживать действия пользователя.
persistent: true делает диалог неприкосновенным к клику вне окна, что полезно для предупреждений.

Настройка внешнего вида и поведения

QDialog поддерживает широкие возможности кастомизации:

Размеры и положение:
- maximized – диалог занимает весь экран.
- full-width / full-height – растягивает по ширине или высоте.
- position – задаёт позицию диалога (top, center, bottom).

this.$q.dialog({
  title: 'Диалог снизу',
  message: 'Пример позиционирования',
  position: 'bottom'
});

Постоянство:
- persistent предотвращает закрытие кликом вне диалога или клавишей Escape.
- Можно комбинировать с no-backdrop-dismiss для полного контроля поведения.
Анимации:
- Поддерживаются стандартные анимации Quasar.
- Атрибуты transition-show и transition-hide позволяют задать собственные эффекты появления и исчезновения.

<q-dialog v-model="dialog" transition-show="scale" transition-hide="fade">
  ...
</q-dialog>

Вложенные и многоступенчатые диалоги

QDialog может содержать другой QDialog, что полезно для многоступенчатых форм:

<q-dialog v-model="step1">
  <q-card>
    <q-card-section>Шаг 1</q-card-section>
    <q-card-actions>
      <q-btn flat label="Далее" @click="step2 = true; step1 = false" />
    </q-card-actions>
  </q-card>
</q-dialog>

<q-dialog v-model="step2">
  <q-card>
    <q-card-section>Шаг 2</q-card-section>
    <q-card-actions>
      <q-btn flat label="Закрыть" v-close-popup />
    </q-card-actions>
  </q-card>
</q-dialog>

Особенности:

При закрытии внутреннего диалога внешний может оставаться открытым.
Важно управлять состояниями с помощью реактивных переменных.

Интеграция с формами

QDialog часто используется для форм ввода данных. Для этого:

Внутри диалога размещаются QInput, QSelect, QCheckbox и другие элементы.
Валидация может выполняться как через обычные методы Vue, так и через Quasar Form Rules.

<q-dialog v-model="dialog">
  <q-card>
    <q-card-section>
      <q-input v-model="name" label="Имя" :rules="[val => !!val || 'Обязательное поле']" />
    </q-card-section>
    <q-card-actions align="right">
      <q-btn flat label="Отмена" v-close-popup />
      <q-btn flat label="Сохранить" @click="submitForm" />
    </q-card-actions>
  </q-card>
</q-dialog>

Метод submitForm проверяет валидность и выполняет обработку данных.
Можно использовать реактивное свойство для управления состоянием кнопки отправки (disabled, loading).