MessageProvider

MessageProvider — это системный компонент библиотеки Naive UI, который обеспечивает централизованное управление уведомлениями и сообщениями в приложении на Vue.js. Он позволяет создавать глобальные и локальные уведомления с тонкой настройкой поведения и внешнего вида. Важнейшей особенностью является способность к асинхронному управлению множественными сообщениями и их очередностью.

Подключение и регистрация

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

import { createApp } from 'vue';
import { create, NMessageProvider } from 'naive-ui';
import App from './App.vue';

const naive = create();
const app = createApp(App);

app.use(naive);
app.component('NMessageProvider', NMessageProvider);
app.mount('#app');

Ключевой момент: NMessageProvider должен быть установлен на уровне компонента, где требуется управление уведомлениями. Глобальная регистрация позволяет управлять сообщениями из любого дочернего компонента, локальная — только внутри области.

Создание сообщений

В Naive UI сообщения создаются через инъекцию message объекта. Он доступен при использовании useMessage:

import { useMessage } from 'naive-ui';

export default {
  setup() {
    const message = useMessage();

    const showSuccess = () => {
      message.success('Операция успешно выполнена');
    };

    return { showSuccess };
  }
}

Основные типы сообщений:

info — информационные уведомления
success — сообщения об успешном завершении
warning — предупреждения
error — ошибки

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

Настройка параметров сообщений

MessageProvider поддерживает глобальные и локальные опции. Глобальные параметры задаются при инициализации:

<NMessageProvider :max="5" :duration="3000" :placement="'top-end'">
  <App />
</NMessageProvider>

max — максимальное количество одновременно отображаемых сообщений
duration — время отображения в миллисекундах
placement — позиция уведомлений (top, bottom, top-end, bottom-start и др.)

Локальные опции можно передавать при создании конкретного сообщения:

message.info('Новое уведомление', { duration: 5000 });

Асинхронное управление очередью

MessageProvider поддерживает очередность сообщений. Если превышен max, новые сообщения помещаются в очередь и показываются после закрытия предыдущих. Для контроля очереди можно использовать промисы:

const showSequential = async () => {
  await message.info('Первое сообщение');
  await message.success('Второе сообщение');
};

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

Кастомизация внешнего вида

Каждое сообщение можно кастомизировать через слоты и пропсы:

message.info({
  content: 'Сообщение с кнопкой',
  closable: true,
  action: h('button', { onClick: () => alert('Нажато') }, 'Действие')
});

Важные свойства для кастомизации:

content — текст или компонент сообщения
type — тип уведомления (info, success, warning, error)
closable — отображение кнопки закрытия
action — компонент действия внутри уведомления

Использование в сочетании с другими провайдерами

MessageProvider легко интегрируется с другими контекстными провайдерами Naive UI, такими как DialogProvider и NotificationProvider, создавая единый интерфейс управления пользовательскими уведомлениями. При этом сообщения могут наследовать темы и стили от родительского провайдера, что облегчает поддержание консистентного UI.