DialogProvider

DialogProvider в Naive UI — это компонент-контейнер, обеспечивающий централизованное управление модальными окнами и диалогами. Для его использования сначала необходимо импортировать и подключить его к корневому компоненту приложения:

import { createApp, h } from 'vue';
import { DialogProvider, NButton } from 'naive-ui';
import App from './App.vue';

const app = createApp({
  render: () => h(DialogProvider, null, { default: () => h(App) })
});

app.mount('#app');

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

  • DialogProvider должен оборачивать весь участок приложения, где будут использоваться модальные окна.
  • Внутри него можно использовать функции открытия диалогов через useDialog.

Импорт и использование хука useDialog

Для управления диалогами применяется хук useDialog. Он возвращает объект с методами dialog, info, warning, error, success для создания различных типов модальных окон. Пример базового использования:

import { useDialog, NButton } from 'naive-ui';
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const dialog = useDialog();

    const showDialog = () => {
      dialog.info({
        title: 'Информация',
        content: 'Это информационный диалог',
        positiveText: 'ОК'
      });
    };

    return { showDialog };
  },
  template: `
    <n-button @click="showDialog">Показать диалог</n-button>
  `
});

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

  • Методы info, success, warning, error автоматически создают диалоги с соответствующим стилем.
  • Метод dialog позволяет полностью контролировать контент, кнопки и события закрытия.

Настройка модальных окон через useDialog

Метод dialog принимает объект настроек с большим количеством параметров, позволяя полностью кастомизировать поведение:

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

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

  • title – заголовок диалога.
  • content – основной контент, может быть строкой, HTML или компонентом Vue.
  • positiveText и negativeText – текст кнопок.
  • onPositiveClick и onNegativeClick – обработчики кликов.
  • closable – возможность закрытия кнопкой X.
  • maskClosable – закрытие при клике на фон.

Асинхронные диалоги

Диалоги поддерживают асинхронные действия. Можно использовать async/await для выполнения логики перед закрытием диалога:

dialog.dialog({
  title: 'Загрузка данных',
  content: 'Подождите, идет процесс...',
  positiveText: 'Начать',
  async onPositiveClick() {
    await fetchData();
    dialog.success({ title: 'Готово', content: 'Данные успешно загружены' });
  }
});

Примечания:

  • Диалог не закрывается автоматически, если метод возвращает Promise.
  • Это позволяет реализовать проверки или загрузку данных перед закрытием.

Кастомизация контента с компонентами

DialogProvider позволяет использовать Vue-компоненты внутри диалогов для сложного контента:

import CustomForm from './CustomForm.vue';

dialog.dialog({
  title: 'Форма ввода',
  content: () => h(CustomForm, { defaultValue: 'Тест' }),
  positiveText: 'Отправить',
  onPositiveClick: (dialogInst) => {
    console.log('Данные отправлены');
    dialogInst.destroy();
  }
});

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

  • Функция content возвращает виртуальный DOM или компонент Vue.
  • Можно передавать пропсы и слоты.
  • Метод destroy() закрывает диалог программно.

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

DialogProvider поддерживает несколько открытых диалогов одновременно. Каждый вызов dialog возвращает объект с методами управления:

const dialogInstance = dialog.dialog({
  title: 'Диалог 1',
  content: 'Содержимое 1',
  positiveText: 'ОК'
});

dialogInstance.destroy(); // Закрытие конкретного диалога

Методы объекта диалога:

  • destroy() – закрывает диалог.
  • update(props) – динамически обновляет свойства диалога.
  • render() – перерендер компонента, если изменился контент.

Стилизация и темы

Диалоги наследуют темы Naive UI, но могут быть переопределены через параметры style и class:

dialog.dialog({
  title: 'Стилизованный диалог',
  content: 'Контент с кастомной темой',
  positiveText: 'ОК',
  style: { width: '400px', backgroundColor: '#f5f5f5' },
  class: 'custom-dialog'
});
  • style – инлайн стили.
  • class – CSS-классы для точечной стилизации.
  • Возможна адаптация под светлую и тёмную тему Naive UI.

Заключение основных возможностей

DialogProvider в сочетании с useDialog предоставляет:

  • Полный контроль над модальными окнами.
  • Асинхронное управление жизненным циклом диалога.
  • Возможность использования Vue-компонентов как контента.
  • Поддержку нескольких одновременно открытых диалогов.
  • Гибкую кастомизацию стилей, классов и тем.

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

Оглавление