Dialog плагин

Для использования Dialog плагина в Quasar необходимо убедиться, что проект настроен с поддержкой плагинов Quasar. Dialog не требует отдельной установки, так как является частью ядра фреймворка. Подключение осуществляется через объект Quasar или напрямую через Composition API:

import { Dialog } from 'quasar'

В случае Options API можно вызвать this.$q.dialog(...), где $q — глобальный объект Quasar, доступный в компонентах.

Основные методы Dialog

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

  1. Alert – простое уведомление с кнопкой подтверждения.
  2. Confirm – диалог с выбором подтверждения или отмены.
  3. Prompt – диалог с полем ввода.
  4. Custom – полностью настраиваемый диалог с любым содержимым.

Alert

Dialog.create({
  title: 'Уведомление',
  message: 'Операция выполнена успешно',
  ok: 'Понятно'
})

Ключевые моменты:

  • title — заголовок окна.
  • message — основной текст.
  • ok — текст кнопки подтверждения.

Confirm

Dialog.create({
  title: 'Подтверждение',
  message: 'Вы действительно хотите удалить этот элемент?',
  cancel: true,
  persistent: true
}).onOk(() => {
  console.log('Элемент удалён')
}).onCancel(() => {
  console.log('Действие отменено')
})

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

  • cancel: true добавляет кнопку отмены.
  • persistent: true предотвращает закрытие диалога при клике вне окна.
  • Обработка действий осуществляется через цепочки onOk и onCancel.

Prompt

Dialog.create({
  title: 'Введите имя',
  prompt: {
    model: '',
    type: 'text',
    isValid: val => val.length > 0,
    label: 'Имя пользователя'
  }
}).onOk(data => {
  console.log('Введено:', data)
})

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

  • model — начальное значение поля ввода.
  • type — тип ввода (text, password, textarea, email и др.).
  • isValid — функция проверки валидности введённых данных.
  • Результат передаётся в колбэк onOk.

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

Dialog поддерживает детальную настройку внешнего вида:

  • Кнопки: можно задавать текст, цвет и действия.
  • Размеры: параметры maxWidth, fullWidth, maxHeight.
  • Модальность: persistent предотвращает закрытие по клику вне окна.
  • Анимация: можно использовать стандартные или кастомные эффекты через transitionShow и transitionHide.
Dialog.create({
  title: 'Сообщение',
  message: 'Это диалог с настраиваемой анимацией',
  ok: { label: 'Закрыть', color: 'primary' },
  persistent: true,
  transitionShow: 'slide-down',
  transitionHide: 'slide-up'
})

Пользовательские диалоги (Custom Dialogs)

Dialog позволяет вставлять любой компонент Vue в модальное окно:

import CustomComponent from './CustomComponent.vue'

Dialog.create({
  component: CustomComponent,
  componentProps: { initialData: 123 },
  persistent: true
})

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

  • component — Vue-компонент для отображения.
  • componentProps — передача данных внутрь компонента.
  • Можно полностью контролировать интерфейс, кнопки и поведение.

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

Dialog плагин поддерживает управление очередью диалогов:

  • Dialog.create() возвращает объект, который можно закрыть вручную через hide().
  • Несколько диалогов можно показывать одновременно, каждый с собственным управлением.
const d = Dialog.create({ message: 'Процесс 1' })
setTimeout(() => d.hide(), 2000)

Dialog.create({ message: 'Процесс 2' })

Использование с Composition API

С Composition API все методы Dialog доступны напрямую:

import { Dialog } from 'quasar'
import { ref } from 'vue'

const showAlert = () => {
  Dialog.create({
    title: 'Важное уведомление',
    message: 'Событие произошло',
    ok: 'ОК'
  })
}

Можно интегрировать Dialog в реактивные состояния, передавая данные через ref и reactive объекты.

Обработка ошибок и валидация

Dialog поддерживает встроенную проверку данных и асинхронную обработку:

Dialog.create({
  title: 'Подтверждение действия',
  message: 'Введите код подтверждения',
  prompt: {
    model: '',
    type: 'text',
    isValid: val => /^\d{4}$/.test(val)
  }
}).onOk(code => {
  console.log('Введён код:', code)
})

Использование регулярных выражений в isValid позволяет строго контролировать ввод.

Советы по интеграции

  • Для крупных приложений лучше создавать отдельные фабрики диалогов с преднастроенными параметрами.
  • Custom Dialog удобен для сложных форм и интерактивных интерфейсов.
  • Persistent диалоги полезны для предупреждений о потере данных.

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

Оглавление