Dialog хелперы

В библиотеке Naive UI компонент Dialog представляет собой мощный инструмент для отображения модальных окон и диалогов с пользователем. Он позволяет реализовать как простые уведомления, так и сложные формы с подтверждением действий. Одной из ключевых особенностей является наличие хелперов, упрощающих работу с диалогами, без необходимости вручную управлять их состоянием через v-model или слоты.

Принцип работы хелперов

Хелперы в Naive UI — это функции, которые создают и управляют диалогами программно. Основные хелперы:

  • dialog.info
  • dialog.success
  • dialog.warning
  • dialog.error
  • dialog.confirm

Каждая из этих функций возвращает Promise, который позволяет обрабатывать результат взаимодействия пользователя с диалогом, например, подтверждение или отмену действия.

import { dialog } from 'naive-ui';

dialog.info({
  title: 'Информация',
  content: 'Это информационный диалог',
}).then(() => {
  console.log('Пользователь закрыл диалог');
});

В примере выше диалог создается динамически, и его закрытие можно отследить через метод .then().

Основные параметры хелперов

  1. title — заголовок окна.
  2. content — основное содержимое диалога. Может быть текстом или JSX/Vue-слотом.
  3. positiveText — текст кнопки подтверждения (по умолчанию “OK”).
  4. negativeText — текст кнопки отмены (для confirm-диалогов).
  5. onPositiveClick — функция, вызываемая при нажатии на кнопку подтверждения.
  6. onNegativeClick — функция для кнопки отмены.
  7. closable — логическое значение, определяющее возможность закрытия диалога через крестик или клик вне окна.
  8. maskClosable — позволяет закрывать окно при клике на фон.

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

dialog.confirm({
  title: 'Подтвердите действие',
  content: 'Вы уверены, что хотите удалить элемент?',
  positiveText: 'Да',
  negativeText: 'Нет',
  onPositiveClick: () => console.log('Элемент удален'),
  onNegativeClick: () => console.log('Действие отменено'),
});

Работа с асинхронными процессами

Хелперы dialog.confirm и аналогичные поддерживают асинхронные функции. Это позволяет, например, запускать сетевые запросы до закрытия окна:

dialog.confirm({
  title: 'Удаление данных',
  content: 'Идет процесс удаления...',
  onPositiveClick: async () => {
    await api.deleteItem(itemId);
    console.log('Данные успешно удалены');
  }
});

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

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

Для всех диалогов можно задавать следующие визуальные параметры:

  • width — ширина модального окна.
  • type — тип диалога (info, success, warning, error, confirm). Влияет на иконку и цветовую схему.
  • icon — кастомная иконка для диалога.
  • scrollable — если содержимое превышает высоту окна, добавляет скролл.
dialog.success({
  title: 'Успех',
  content: 'Операция выполнена успешно',
  width: '500px',
  scrollable: true,
});

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

Хелперы возвращают объект dialogInstance, который позволяет закрывать или обновлять диалог программно:

const dialogInstance = dialog.info({
  title: 'Загрузка',
  content: 'Пожалуйста, дождитесь завершения'
});

// Закрыть диалог через 3 секунды
setTimeout(() => dialogInstance.destroy(), 3000);

Методы объекта:

  • destroy() — закрывает диалог.
  • update(options) — обновляет свойства окна (title, content, кнопки).

Пример динамического обновления содержимого:

const instance = dialog.info({
  title: 'Процесс',
  content: 'Начало операции...'
});

setTimeout(() => {
  instance.update({
    content: 'Операция почти завершена...'
  });
}, 2000);

Использование JSX или Vue-слотов в хелперах

Хелперы поддерживают передачу контента через функцию или JSX, что позволяет создавать интерактивные элементы внутри диалога:

import { h } from 'vue';

dialog.info({
  title: 'Сложный контент',
  content: () => h('div', [
    h('p', 'Текст с форматированием'),
    h('button', { onClick: () => console.log('Кнопка внутри диалога') }, 'Нажми меня')
  ])
});

Такой подход делает возможным реализацию форм, списков и сложных интерфейсов без использования стандартного компонента n-dialog вручную.

Особенности работы с confirm и асинхронной логикой

  • dialog.confirm по умолчанию возвращает Promise, который резолвится, если пользователь нажал кнопку подтверждения, и реджектится при отмене.
  • Можно обрабатывать результат через await:
try {
  await dialog.confirm({ title: 'Удалить файл?', content: 'Это действие нельзя отменить' });
  console.log('Файл удален');
} catch {
  console.log('Удаление отменено');
}
  • Асинхронные операции внутри onPositiveClick автоматически блокируют закрытие окна до завершения Promise.

Практические рекомендации

  • Использовать хелперы вместо ручного управления v-model, когда требуется быстрый и динамический диалог.
  • Для однотипных уведомлений (info, success, error) использовать соответствующие функции вместо confirm.
  • Для сложного контента или интерактивных форм комбинировать функцию content с JSX или Vue-слотами.
  • Управлять жизненным циклом окна через возвращаемый объект (destroy и update), если диалог должен изменяться динамически.

Эти возможности делают хелперы Naive UI Dialog гибким инструментом для построения любых модальных интерфейсов в современных приложениях на Vue.js и JavaScript.

Оглавление