Message компонент

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

Message реализован как функциональный API, а не как обычный компонент Vue с тегом. Это означает, что сообщения создаются динамически через вызовы методов message.info, message.success, message.warning, message.error и message.loading.

import { createMessage } from 'naive-ui';

const message = createMessage();

message.success('Операция выполнена успешно');

Ключевой особенностью является централизованное управление состоянием сообщений. Все уведомления выводятся через единый экземпляр message, что позволяет контролировать очередь сообщений, их длительность и тип.

Типы сообщений

Naive UI предоставляет пять основных типов сообщений:

  1. info – информационное сообщение
  2. success – сообщение об успешном завершении операции
  3. warning – предупреждающее сообщение
  4. error – сообщение об ошибке
  5. loading – индикатор загрузки или процесса

Пример использования всех типов:

message.info('Информационное сообщение');
message.success('Успех!');
message.warning('Внимание!');
message.error('Произошла ошибка');
message.loading('Загрузка...');

Каждый тип имеет стандартное оформление, которое соответствует общей теме Naive UI, но может быть изменено через CSS-переменные или глобальные настройки.

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

Message позволяет детально настраивать поведение отображения через объект опций:

  • content – текст сообщения
  • duration – время отображения в миллисекундах (по умолчанию 3000)
  • closable – возможность закрытия пользователем (true/false)
  • onClose – колбэк при закрытии сообщения
  • icon – кастомный иконка для сообщения
  • keepAliveOnHover – при наведении сообщение не исчезает

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

message.success({
  content: 'Данные сохранены',
  duration: 5000,
  closable: true,
  onClose: () => console.log('Сообщение закрыто')
});

Управление очередью сообщений

Message в Naive UI автоматически управляет очередью уведомлений. Если несколько сообщений создаются подряд, они выстраиваются вертикально, с минимальным интервалом между ними.

Методы для управления очередью:

  • message.destroyAll() – удаляет все текущие сообщения
  • message.close(messageId) – закрывает конкретное сообщение по ID
const msg = message.info('Скоро закроется');
message.close(msg.id);

Каждое сообщение возвращает объект с уникальным id, что позволяет управлять отдельными уведомлениями динамически.

Интеграция с Vue

Message интегрируется с Vue через плагин:

import { createApp } from 'vue';
import { createMessage, NButton } from 'naive-ui';

const app = createApp(App);
const message = createMessage(app);

app.mount('#app');

message.success('Привет из Vue!');

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

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

Для изменения стиля Message можно использовать CSS-переменные:

  • --n-message-text-color – цвет текста
  • --n-message-color – фон сообщения
  • --n-message-border-radius – скругление углов
  • --n-message-padding – внутренние отступы
  • --n-message-icon-size – размер иконки

Пример через стиль:

:root {
  --n-message-color: #f0f9eb;
  --n-message-text-color: #67c23a;
  --n-message-border-radius: 8px;
}

Также поддерживается кастомизация иконок с помощью свойства icon:

import { NIcon } from 'naive-ui';
import { CheckCircle } from '@vicons/ionicons5';

message.success({
  content: 'Готово',
  icon: () => h(NIcon, null, { default: () => h(CheckCircle) })
});

Асинхронные сообщения

Особая полезная возможность Message – отображение индикатора загрузки с последующим обновлением:

const loadingMsg = message.loading('Загрузка данных...');

// эмуляция завершения операции через 2 секунды
setTimeout(() => {
  loadingMsg.close();
  message.success('Данные загружены');
}, 2000);

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

Советы по использованию

  • Использовать короткие и информативные сообщения – слишком длинный текст ухудшает восприятие.
  • Для длительных операций использовать message.loading с последующим закрытием и сменой типа.
  • Для критических ошибок применять message.error с возможностью закрытия.
  • Комбинировать кастомные иконки и цвета для соответствия стилю приложения.

Message в Naive UI является гибким инструментом уведомлений, который позволяет создавать адаптивные и стильные сообщения с минимальными усилиями, интегрируясь с системой Vue и поддерживая полный контроль над поведением и внешним видом.

Оглавление