Notification система

Notification в Naive UI представляет собой компонент для отображения временных уведомлений пользователю. Он поддерживает несколько типов сообщений — success, info, warning, error — и позволяет гибко управлять их поведением, стилем и временем отображения. Основным преимуществом Notification является его легкость интеграции в проект без необходимости создавать отдельные компоненты для каждой ситуации.

Импорт и инициализация

Для использования Notification необходимо импортировать useNotification из Naive UI и создать его экземпляр:

import { useNotification } from 'naive-ui'

const notification = useNotification()

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

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

Методы для создания уведомлений включают:

  • notification.info(options) — информационное уведомление.
  • notification.success(options) — уведомление об успешном действии.
  • notification.warning(options) — предупреждающее уведомление.
  • notification.error(options) — уведомление об ошибке.
  • notification.open(options) — универсальный метод, позволяющий задать любой тип уведомления через параметр type.

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

notification.success({
  title: 'Операция выполнена',
  content: 'Данные успешно сохранены',
  duration: 3000
})

Параметры options:

  • title — заголовок уведомления.
  • content — основной текст уведомления.
  • type — success | info | warning | error (только для open).
  • duration — время отображения в миллисекундах. Значение 0 делает уведомление постоянным до закрытия вручную.
  • onClose — функция обратного вызова при закрытии уведомления.
  • closable — логическое значение, позволяющее отображать кнопку закрытия.

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

Notification автоматически позиционирует уведомления одно под другим в верхнем правом углу страницы. Можно управлять порядком их отображения, используя параметр placement:

notification.success({
  title: 'Готово',
  content: 'Процесс завершен',
  placement: 'top-left'
})

Возможные значения placement:

  • top-left
  • top-right
  • bottom-left
  • bottom-right

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

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

Notification поддерживает кастомизацию через свойства:

  • icon — можно передать компонент или строку с именем иконки.
  • color — позволяет изменить цвет уведомления.
  • duration — управляет временем жизни уведомления, что полезно для предупреждений, которые должны исчезать автоматически.

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

notification.open({
  type: 'info',
  title: 'Важная информация',
  content: 'Это уведомление с кастомной иконкой и цветом',
  icon: 'bell',
  color: '#409EFF',
  duration: 5000
})

Программное закрытие уведомлений

Метод notification.destroy() закрывает все активные уведомления:

notification.destroy()

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

const key = notification.success({
  title: 'Пример',
  content: 'Закрытие по ключу',
  duration: 0
})

notification.destroy(key)

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

Использование с асинхронными процессами

Notification отлично подходит для информирования о ходе асинхронных действий, таких как загрузка данных с сервера или выполнение операций:

async function saveData() {
  const key = notification.info({
    title: 'Сохранение',
    content: 'Данные отправляются...',
    duration: 0
  })
  
  try {
    await api.save()
    notification.success({
      title: 'Готово',
      content: 'Данные успешно сохранены'
    })
  } catch (error) {
    notification.error({
      title: 'Ошибка',
      content: 'Не удалось сохранить данные'
    })
  } finally {
    notification.destroy(key)
  }
}

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

Интеграция с глобальным состоянием

Notification можно использовать совместно с Vuex или Pinia для централизованного управления уведомлениями в больших приложениях. Для этого создается сервис уведомлений, который вызывает методы notification из любого места приложения, включая компоненты, модули или асинхронные обработчики событий.

Эта структура Notification в Naive UI обеспечивает гибкость, удобство и минимальную настройку для создания отзывчивого интерфейса с понятными и наглядными уведомлениями.

Оглавление