Message

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

Импорт и базовое использование

Для начала необходимо импортировать функцию ElMessage из библиотеки:

import { ElMessage } from 'element-plus';

Базовый вызов уведомления выглядит следующим образом:

ElMessage('Простое уведомление');

По умолчанию уведомление будет иметь тип info, длительность отображения 3000 миллисекунд и автоматически исчезнет.

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

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

ElMessage({
  message: 'Успешная операция',
  type: 'success', // 'success' | 'warning' | 'info' | 'error'
});
  • success — успешное действие.
  • warning — предупреждение, требующее внимания.
  • info — информационное сообщение.
  • error — ошибка или неудачная операция.

Тип сообщения влияет на цвет фона и иконку.

Настройка параметров

Метод ElMessage принимает объект с настройками:

ElMessage({
  message: 'Сообщение с настройками',
  type: 'warning',
  duration: 5000, // длительность отображения в миллисекундах
  showClose: true, // отображение кнопки закрытия
  center: true, // выравнивание текста по центру
  offset: 50, // отступ сверху
});

Основные параметры:

  • message — текст уведомления.
  • type — тип уведомления (success, warning, info, error).
  • duration — время отображения (0 — сообщение не исчезает автоматически).
  • showClose — отображение кнопки закрытия.
  • center — центрирование текста.
  • offset — смещение от верхнего края экрана.
  • dangerouslyUseHTMLString — позволяет использовать HTML внутри текста (использовать осторожно).

Программное закрытие сообщений

Метод ElMessage возвращает объект с функцией закрытия:

const messageInstance = ElMessage({
  message: 'Закрытие через 2 секунды',
  duration: 0, // не исчезает автоматически
});

setTimeout(() => {
  messageInstance.close();
}, 2000);

Это позволяет управлять временем жизни уведомления программно.

Группировка и стек уведомлений

Несколько сообщений автоматически выстраиваются в стек, чтобы новые сообщения не перекрывали предыдущие. Параметр offset позволяет контролировать вертикальное положение уведомлений:

ElMessage({
  message: 'Первое сообщение',
  offset: 20
});

ElMessage({
  message: 'Второе сообщение',
  offset: 60
});

Использование с функциями обратного вызова

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

ElMessage({
  message: 'Сообщение с коллбэком',
  type: 'info',
  onClose: () => {
    console.log('Сообщение закрыто');
  }
});

HTML-содержимое и кастомизация

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

ElMessage({
  message: '<strong>Важная информация</strong>',
  type: 'success',
  dangerouslyUseHTMLString: true
});

Создание кастомных экземпляров

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

import { ElMessage } from 'element-plus';

const customMessage = (options) => {
  return ElMessage({
    duration: 4000,
    showClose: true,
    ...options
  });
};

customMessage({ message: 'Кастомное уведомление', type: 'info' });

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

  • Для кратких информационных уведомлений достаточно базового вызова ElMessage('Текст').
  • Для важных сообщений, требующих внимания пользователя, используйте type и showClose.
  • Не злоупотреблять dangerouslyUseHTMLString, чтобы избежать XSS-уязвимостей.
  • Управление offset удобно при множественных уведомлениях, чтобы они не перекрывали друг друга.

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

Оглавление