Программное управление диалогами

В библиотеке Quasar диалоги (Dialogs) предоставляют мощный механизм для взаимодействия с пользователем. Они позволяют отображать сообщения, формы, подтверждения действий и настраиваемые компоненты поверх основного интерфейса приложения. Управление диалогами может осуществляться как декларативно через шаблон, так и программно через API.

Программный API Quasar для диалогов

Quasar предоставляет глобальный объект $q.dialog, который используется для вызова диалогов в коде. Он поддерживает различные типы диалогов: alert, confirm, prompt и custom.

Пример простого диалога подтверждения:

this.$q.dialog({
  title: 'Удаление файла',
  message: 'Вы уверены, что хотите удалить этот файл?',
  cancel: true,
  persistent: true
}).onOk(() => {
  console.log('Файл удален');
}).onCancel(() => {
  console.log('Удаление отменено');
});
  • title – заголовок окна.
  • message – текст сообщения.
  • cancel – добавляет кнопку “Отмена”.
  • persistent – запрещает закрытие диалога кликом вне его.
  • .onOk() и .onCancel() – обработчики событий для кнопок.

Настройка типов диалогов

1. Alert (информационный диалог)

Отображает простое сообщение и одну кнопку для закрытия:

this.$q.dialog({
  title: 'Информация',
  message: 'Операция завершена успешно',
  ok: true
});

2. Confirm (диалог подтверждения)

Используется для действий, требующих согласия пользователя:

this.$q.dialog({
  title: 'Подтверждение',
  message: 'Вы действительно хотите выйти?',
  cancel: true,
  ok: 'Да, выйти'
});

3. Prompt (диалог с вводом данных)

Позволяет запросить текст или число у пользователя:

this.$q.dialog({
  title: 'Введите имя',
  prompt: {
    model: '',
    type: 'text'
  },
  cancel: true
}).onOk(data => {
  console.log('Введенное имя:', data);
});
  • model – начальное значение поля.
  • type – тип ввода (text, number, textarea и т.д.).

4. Custom Dialog (настраиваемый компонент)

Позволяет полностью контролировать содержимое диалога:

this.$q.dialog({
  component: CustomDialogComponent,
  componentProps: {
    userId: 123
  }
});
  • component – Vue-компонент, который будет отображен в диалоге.
  • componentProps – передача пропсов компоненту.

Управление поведением диалогов

Закрытие и программное управление

Любой диалог можно закрыть через метод hide():

const dialog = this.$q.dialog({
  title: 'Загрузка',
  message: 'Подождите...'
});

setTimeout(() => {
  dialog.hide();
}, 3000);
  • dialog.hide() закрывает конкретный диалог.
  • Можно использовать .onDismiss() для отслеживания закрытия любым способом.

Настройка кнопок и событий

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

this.$q.dialog({
  title: 'Выбор действия',
  message: 'Выберите один из вариантов',
  actions: [
    { label: 'Сохранить', color: 'primary', handler: () => console.log('Сохранено') },
    { label: 'Отменить', color: 'negative', handler: () => console.log('Отменено') }
  ]
});
  • Каждая кнопка определяется объектом с label, color и handler.
  • Полная кастомизация позволяет создавать сложные интерфейсы внутри диалогового окна.

Особенности управления диалогами в больших приложениях

  1. Цепочки диалогов Можно создавать последовательные диалоги через промисы или коллбэки .onOk()/.onCancel(), что удобно для многошаговых форм.

  2. Множественные диалоги Quasar позволяет одновременно отображать несколько диалогов. Для этого важно сохранять ссылки на каждый диалог и контролировать их закрытие программно.

  3. Интеграция с Vuex или Pinia Программное управление состоянием диалогов удобно при использовании централизованного хранилища. Например, можно хранить статус отображения диалога и его данные в store, чтобы реагировать на внешние события.

  4. Persistent и Esc-обработка Параметр persistent блокирует закрытие кликом вне окна. Можно также подписываться на событие закрытия клавишей Esc через @keyup.esc, если требуется дополнительная логика.

Примеры комплексного использования

Многошаговая форма с проверкой данных:

this.$q.dialog({
  title: 'Регистрация',
  component: RegistrationForm,
  persistent: true
}).onOk(data => {
  this.$q.dialog({
    title: 'Подтверждение данных',
    message: `Вы ввели имя: ${data.name}, email: ${data.email}`,
    cancel: true
  }).onOk(() => {
    console.log('Регистрация завершена');
  });
});

Диалог с загрузкой и прогрессом:

const loader = this.$q.dialog({
  title: 'Загрузка файлов',
  message: 'Пожалуйста, подождите...',
  progress: true
});

uploadFiles().then(() => {
  loader.hide();
});
  • progress: true отображает индикатор выполнения.
  • Диалог можно обновлять динамически, изменяя message или progress через реактивные свойства компонента.

Выводы по программному управлению диалогами

Программное управление диалогами в Quasar обеспечивает максимальную гибкость при построении пользовательских интерфейсов. Использование $q.dialog позволяет создавать как простые сообщения, так и сложные многошаговые формы с кастомными компонентами. Ключевые моменты для эффективной работы:

  • Разделение логики отображения и обработки данных.
  • Управление состоянием через промисы или централизованное хранилище.
  • Использование кастомных компонентов для сложных интерфейсов.
  • Контроль закрытия и событий кнопок для надежного UX.
Оглавление