Confirm и Prompt диалоги

Quasar предоставляет мощные и гибкие средства для работы с диалогами подтверждения (Confirm) и ввода данных (Prompt) через сервис $q.dialog. Эти диалоги позволяют быстро реализовать интерактивные элементы без необходимости писать собственные модальные окна с нуля.

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

Диалог Confirm применяется для запроса подтверждения действия у пользователя. Основной метод — $q.dialog(), который возвращает Promise, что удобно для асинхронной обработки ответа.

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

Ключевые параметры:

  • title — заголовок диалога.
  • message — основной текст.
  • cancel — отображение кнопки «Отмена» (boolean).
  • persistent — предотвращает закрытие кликом вне окна (boolean).
  • ok — текст кнопки подтверждения (по умолчанию «OK»).
  • cancel — текст кнопки отмены (по умолчанию «Cancel»).

Особенности работы:

  1. Возвращаемый объект поддерживает методы .onOk(), .onCancel(), .onDismiss().
  2. Можно настроить различные стили кнопок, цвета и иконки через свойства color, icon, okColor, cancelColor.
  3. Асинхронный синтаксис с async/await делает обработку проще:
try {
  await this.$q.dialog({
    title: 'Подтверждение',
    message: 'Сохранить изменения?',
    cancel: true
  });
  console.log('Изменения сохранены');
} catch {
  console.log('Сохранение отменено');
}

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

Диалог Prompt предназначен для получения ввода от пользователя. Он расширяет функционал Confirm, добавляя поле ввода.

this.$q.dialog({
  title: 'Введите имя',
  message: 'Пожалуйста, введите ваше имя:',
  prompt: {
    model: '',
    type: 'text', // text, textarea, number, email, password
    isValid: val => val.length > 0, // валидатор
    attrs: { maxlength: 50, autofocus: true }
  },
  cancel: true
}).onOk(data => {
  console.log('Введено:', data);
}).onCancel(() => {
  console.log('Ввод отменен');
});

Ключевые параметры:

  • prompt.model — привязка к полю ввода.
  • prompt.type — тип поля (text, textarea, number, email, password).
  • prompt.isValid — функция для валидации ввода; возвращает true или false.
  • prompt.attrs — объект с атрибутами для поля ввода (maxlength, autofocus, placeholder и др.).

Дополнительные возможности:

  • Можно задать mask и rules для сложной валидации.
  • Поддерживается асинхронная обработка через await.
try {
  const name = await this.$q.dialog({
    title: 'Введите имя пользователя',
    message: 'Имя должно содержать не менее 3 символов',
    prompt: {
      model: '',
      type: 'text',
      isValid: val => val.length >= 3
    },
    cancel: true
  });
  console.log('Имя пользователя:', name);
} catch {
  console.log('Ввод отменен');
}

Стилизация и кастомизация диалогов

Quasar позволяет полностью изменять внешний вид Confirm и Prompt:

  • Цвета кнопок: okColor, cancelColor.
  • Иконки: icon, okIcon, cancelIcon.
  • Позиционирование: через position: 'top' | 'bottom' | 'center'.
  • Persistent и no-backdrop-dismiss: предотвращают закрытие кликами или ESC.

Пример кастомного Confirm:

this.$q.dialog({
  title: 'Удаление записи',
  message: 'Вы действительно хотите удалить эту запись навсегда?',
  cancel: true,
  persistent: true,
  okColor: 'negative',
  okIcon: 'delete',
  cancelColor: 'grey'
}).onOk(() => {
  console.log('Запись удалена');
});

Взаимодействие с Vue-компонентами

Диалоги Quasar могут содержать слоты и кастомные компоненты для более сложного интерфейса. Пример использования кастомного контента:

this.$q.dialog({
  title: 'Настройки пользователя',
  message: 'Выберите параметры',
  component: MyCustomSettingsComponent,
  cancel: true
});

Компонент MyCustomSettingsComponent может иметь собственные методы и события, которые будут обработаны через стандартный API $q.dialog.

Best Practices

  1. Использовать Confirm для действий с последствиями, например удаление, сохранение, выход.
  2. Prompt только для ввода данных, избегая чрезмерного усложнения форм.
  3. Асинхронная обработка через async/await упрощает чтение и уменьшает вложенность .onOk() и .onCancel().
  4. Persistent для критических действий, чтобы случайный клик вне окна не закрывал диалог.
  5. Валидация через isValid предотвращает ввод некорректных данных без лишней логики.

Использование Confirm и Prompt в Quasar обеспечивает быстрый, безопасный и стилизованный способ интерактивного взаимодействия с пользователем, сохраняя при этом чистоту кода и соответствие современным практикам Vue.js.

Оглавление