NotificationProvider

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

Подключение и базовая установка

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

import { createApp } from 'vue'
import { NNotificationProvider, useNotification } from 'naive-ui'
import App from './App.vue'

const app = createApp({
  setup() {
    const notification = useNotification()
    notification.success({ content: 'Приложение запущено' })
  },
  render: () => h(App)
})

app.component('NNotificationProvider', NNotificationProvider)
app.mount('#app')
  • NNotificationProvider создаёт контекст уведомлений.
  • useNotification() возвращает API для динамического вызова уведомлений из любого компонента, подключённого к провайдеру.

Основные методы API

Методы уведомлений делятся на типы сообщений:

const notification = useNotification()

notification.info({ content: 'Информационное сообщение' })
notification.success({ content: 'Успешная операция' })
notification.warning({ content: 'Предупреждение' })
notification.error({ content: 'Ошибка' })

Параметры методов:

  • content — текст уведомления.
  • title — заголовок уведомления (необязательный).
  • duration — время отображения в миллисекундах. Значение 0 делает уведомление постоянным.
  • onClose — функция обратного вызова при закрытии уведомления.
  • closable — отображать кнопку закрытия (true/false).

Настройка NotificationProvider

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

<NNotificationProvider
  :max="5"
  placement="top-right"
  :duration="3000"
  :keep-alive="true"
/>

Ключевые пропсы:

  • max — максимальное количество уведомлений одновременно. Новые уведомления появятся, когда старые будут закрыты.
  • placement — положение уведомлений на экране: top-right, top-left, bottom-right, bottom-left.
  • duration — глобальное время отображения уведомлений (можно переопределять локально при вызове).
  • keep-alive — сохраняет уведомления при переходе между компонентами.

Динамическое управление уведомлениями

Каждое уведомление можно закрыть вручную или программно:

const key = notification.success({
  title: 'Сохранено',
  content: 'Данные успешно сохранены',
  duration: 5000
})

// Через 2 секунды закрыть уведомление
setTimeout(() => {
  notification.destroy(key)
}, 2000)
  • destroy(key) — удаляет уведомление по ключу.
  • destroyAll() — очищает все уведомления текущего провайдера.

Возврат ключа позволяет создавать уведомления с уникальными идентификаторами для последующего управления.

Работа с кастомным контентом

NotificationProvider поддерживает использование компонентов Vue для content, что позволяет вставлять кнопки, изображения или интерактивные элементы:

notification.info({
  title: 'Обновление',
  content: h('div', [
    h('span', 'Новая версия доступна!'),
    h('button', { onClick: () => alert('Установлено') }, 'Обновить')
  ]),
  duration: 0
})
  • Использование h() позволяет создавать полностью кастомизированный JSX-подобный контент.
  • duration: 0 делает уведомление постоянным до ручного закрытия пользователем.

Лимит и приоритет уведомлений

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

Пример с динамическим добавлением уведомлений:

for (let i = 0; i < 10; i++) {
  notification.info({ content: `Сообщение ${i + 1}` })
}

Если max=3, то одновременно будут показаны только 3 уведомления, остальные появятся по мере закрытия предыдущих.

Стилизация уведомлений

NotificationProvider наследует тему Naive UI. Можно переопределять цвета, шрифты и отступы через theme overrides:

<NNotificationProvider
  :theme-overrides="{
    Notification: {
      colorInfo: '#2196F3',
      colorSuccess: '#4CAF50',
      borderRadius: '8px',
      fontSize: '14px'
    }
  }"
/>
  • colorInfo, colorSuccess, colorWarning, colorError — цвета для разных типов уведомлений.
  • borderRadius — скругление углов.
  • fontSize — размер текста уведомлений.

Советы по производительности

  1. Использовать max для предотвращения перегрузки уведомлениями.
  2. Применять duration разумно, чтобы уведомления автоматически скрывались.
  3. Для сложного контента использовать keep-alive и уникальные ключи для управления состоянием.

NotificationProvider в Naive UI обеспечивает универсальное решение для уведомлений: гибкое, кастомизируемое и полностью интегрированное с экосистемой Vue 3. Он позволяет создавать информативные, динамичные и управляемые уведомления, минимизируя необходимость писать собственную логику управления отображением сообщений.

Оглавление