Message Box

Message Box — это мощный компонент библиотеки Element Plus для отображения модальных диалогов с интерактивными сообщениями. Он позволяет выводить уведомления, запросы подтверждения, формы ввода и кастомные диалоги, обеспечивая высокий уровень взаимодействия с пользователем.

Подключение и базовое использование

Для работы с Message Box необходимо импортировать соответствующий модуль из Element Plus:

import { ElMessageBox } from 'element-plus';

Базовый синтаксис вызова модального окна:

ElMessageBox('Текст сообщения', 'Заголовок', {
  confirmButtonText: 'OK',
  cancelButtonText: 'Отмена',
  type: 'warning'
}).then(() => {
  console.log('Подтверждено');
}).catch(() => {
  console.log('Отменено');
});

Ключевые моменты:

  • ElMessageBox возвращает Promise, что позволяет обрабатывать действия пользователя через .then() и .catch().
  • Параметр type может принимать значения: success, warning, info, error.
  • confirmButtonText и cancelButtonText задают подписи кнопок.

Методы Message Box

Element Plus предоставляет несколько методов для упрощённого использования Message Box:

1. alert

Используется для отображения простого сообщения с одной кнопкой подтверждения.

ElMessageBox.alert('Это важное уведомление', 'Внимание', {
  confirmButtonText: 'Понятно',
  type: 'info'
});

Особенности:

  • Всегда одна кнопка подтверждения.
  • Возвращает Promise, который разрешается после нажатия кнопки.

2. confirm

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

ElMessageBox.confirm('Вы уверены, что хотите удалить элемент?', 'Подтверждение', {
  confirmButtonText: 'Да',
  cancelButtonText: 'Нет',
  type: 'warning'
}).then(() => {
  console.log('Элемент удалён');
}).catch(() => {
  console.log('Удаление отменено');
});

Особенности:

  • Promise разрешается при нажатии кнопки подтверждения и отклоняется при отмене.
  • Можно использовать различные типы диалогов для визуальной дифференциации сообщений.

3. prompt

Используется для запроса ввода от пользователя через поле ввода внутри модального окна.

ElMessageBox.prompt('Введите своё имя', 'Регистрация', {
  confirmButtonText: 'Сохранить',
  cancelButtonText: 'Отмена',
  inputPattern: /^[a-zA-Z]+$/,
  inputErrorMessage: 'Только латинские буквы'
}).then(({ value }) => {
  console.log('Введено:', value);
}).catch(() => {
  console.log('Ввод отменён');
});

Особенности:

  • inputPattern позволяет задать регулярное выражение для валидации ввода.
  • inputErrorMessage показывает сообщение об ошибке, если ввод не соответствует шаблону.
  • Возвращает объект с полем value, содержащим введённый текст.

Настройка внешнего вида и поведения

Message Box поддерживает широкие возможности кастомизации через опции:

  • lockScroll — блокирует прокрутку страницы при открытом модальном окне.
  • closeOnClickModal — закрытие окна при клике на затемнённый фон.
  • closeOnPressEscape — закрытие окна при нажатии клавиши Esc.
  • showClose — отображение кнопки закрытия в правом верхнем углу.
  • center — выравнивание заголовка по центру.

Пример:

ElMessageBox.confirm('Вы уверены?', 'Удаление', {
  confirmButtonText: 'Да',
  cancelButtonText: 'Нет',
  type: 'error',
  lockScroll: true,
  closeOnClickModal: false,
  center: true
});

Программное закрытие Message Box

Message Box можно закрыть программно с помощью методов:

import { ElMessageBox } from 'element-plus';

const msgBox = ElMessageBox.confirm('Сообщение', 'Заголовок');
msgBox.close(); // Закрывает окно вручную

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

ElMessageBox.closeAll();

Асинхронная обработка

Благодаря возвращаемому Promise, Message Box отлично интегрируется с асинхронным кодом:

async function deleteItem() {
  try {
    await ElMessageBox.confirm('Удалить этот элемент?', 'Внимание', { type: 'warning' });
    await api.deleteItem();
    ElMessage.success('Элемент успешно удалён');
  } catch {
    ElMessage.info('Удаление отменено');
  }
}

Интеграция с Vue-компонентами

Message Box можно использовать внутри методов компонентов Vue:

export default {
  methods: {
    async handleDelete() {
      try {
        await ElMessageBox.confirm('Точно удалить?', 'Подтверждение', { type: 'warning' });
        this.items.splice(this.index, 1);
      } catch {}
    }
  }
};

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

Кастомные диалоги с компонентами

Message Box позволяет вставлять свои Vue-компоненты для сложных интерфейсов:

import CustomForm from './CustomForm.vue';

ElMessageBox({
  title: 'Заполните форму',
  message: h(CustomForm, { prop1: 'value1' }),
  showCancelButton: true,
  confirmButtonText: 'Отправить'
});
  • h() используется для рендеринга Vue-компонента внутри окна.
  • Позволяет создавать полностью кастомизированные модальные формы.

Резюме ключевых особенностей

  • Возвращает Promise, что упрощает обработку действий пользователя.
  • Поддерживает alert, confirm и prompt для различных сценариев.
  • Полностью настраиваемый внешний вид и поведение.
  • Возможность программного закрытия и глобального управления окнами.
  • Интеграция с Vue-компонентами и асинхронными процессами.
  • Поддержка кастомных компонентов для сложных интерфейсов.

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

Оглавление