Notification

Notification в Element Plus представляет собой всплывающее уведомление, предназначенное для отображения краткой информации пользователю. Оно используется для оповещений о действиях, результатах операций, ошибках или предупреждениях.

Создание уведомления осуществляется вызовом метода ElNotification с объектом конфигурации:

import { ElNotification } from 'element-plus';

ElNotification({
  title: 'Успешно',
  message: 'Данные сохранены',
  type: 'success'
});

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

  • title — заголовок уведомления.
  • message — основной текст уведомления.
  • type — тип уведомления (success, warning, info, error), который автоматически добавляет соответствующую иконку и цветовую схему.
  • duration — время отображения в миллисекундах (по умолчанию 4500). Если указать 0, уведомление останется до закрытия вручную.
  • position — позиция на экране (top-right, top-left, bottom-right, bottom-left). По умолчанию — top-right.
  • dangerouslyUseHTMLString — позволяет передавать HTML в message. Использовать с осторожностью.
  • onClick — функция, вызываемая при клике на уведомление.
  • onClose — функция, вызываемая при закрытии уведомления.

Типы уведомлений и визуальное оформление

Уведомления автоматически различаются по типу:

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

Пример разных типов:

ElNotification({
  title: 'Информация',
  message: 'Это информационное уведомление',
  type: 'info'
});

ElNotification({
  title: 'Ошибка',
  message: 'Произошла ошибка при сохранении данных',
  type: 'error'
});

Настройка позиции и времени отображения

Уведомления можно позиционировать в любой из четырех областей экрана:

ElNotification({
  title: 'Внимание',
  message: 'Проверка данных',
  position: 'bottom-left'
});

Время показа уведомления задается через параметр duration:

ElNotification({
  title: 'Сохранено',
  message: 'Файл успешно сохранён',
  duration: 2000
});

Для постоянного уведомления можно указать duration: 0:

ElNotification({
  title: 'Требуется внимание',
  message: 'Закройте это уведомление вручную',
  duration: 0
});

Использование HTML в уведомлениях

Если нужно добавить форматирование текста или ссылки, можно использовать dangerouslyUseHTMLString:

ElNotification({
  title: 'Подробности',
  message: '<strong>Данные сохранены</strong> успешно!',
  dangerouslyUseHTMLString: true
});

Группировка и управление уведомлениями

Все уведомления Element Plus создаются в глобальном контейнере. Чтобы закрыть уведомление программно, возвращается объект с методом close:

const notification = ElNotification({
  title: 'Загрузка',
  message: 'Идёт обработка данных...',
  duration: 0
});

setTimeout(() => {
  notification.close();
}, 5000);

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

import { ElNotification } from 'element-plus';

ElNotification.closeAll();

Динамическое создание уведомлений с разными параметрами

Можно создавать уведомления динамически, изменяя заголовок, тип и содержание на лету:

function notifyUser(status) {
  let type, message;

  switch(status) {
    case 'success':
      type = 'success';
      message = 'Операция выполнена успешно';
      break;
    case 'error':
      type = 'error';
      message = 'Произошла ошибка';
      break;
    default:
      type = 'info';
      message = 'Статус неизвестен';
  }

  ElNotification({ title: 'Статус', message, type });
}

Интерактивные уведомления

Для добавления интерактивности можно использовать колбэки onClick и onClose:

ElNotification({
  title: 'Нажмите для действия',
  message: 'Кликните на уведомление',
  onClick: () => {
    console.log('Уведомление кликнуто');
  },
  onClose: () => {
    console.log('Уведомление закрыто');
  }
});

Итоговые рекомендации по использованию

  • Выбирать тип уведомления в зависимости от контекста (success, error, info, warning).
  • Для временных сообщений использовать duration с разумным временем отображения (2–5 секунд).
  • Для уведомлений с HTML использовать dangerouslyUseHTMLString аккуратно.
  • Управлять уведомлениями программно через возвращаемый объект или метод closeAll для удобного контроля интерфейса.

Эти возможности делают Notification в Element Plus гибким инструментом для информирования пользователей и управления визуальными оповещениями в приложении.

Оглавление