Message Box для подтверждений

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

Базовый вызов Message Box осуществляется через глобальный метод ElMessageBox.confirm. Он возвращает промис, что позволяет работать с результатом асинхронно:

import { ElMessageBox } from 'element-plus';

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

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

  • Первый аргумент — текст сообщения.

  • Второй аргумент — заголовок окна.

  • Третий аргумент — объект опций:

    • confirmButtonText и cancelButtonText задают подписи кнопок.
    • type определяет визуальный стиль окна (warning, info, success, error).

  • Метод возвращает промис, который:

    • Разрешается (then) при нажатии кнопки подтверждения.
    • Отклоняется (catch) при нажатии кнопки отмены или закрытии окна.

Кастомизация кнопок и поведения

Message Box поддерживает настройку порядка кнопок, их вид и дополнительные свойства:

ElMessageBox.confirm(
  'Хотите сохранить изменения перед выходом?',
  'Сохранение изменений',
  {
    confirmButtonText: 'Сохранить',
    cancelButtonText: 'Не сохранять',
    distinguishCancelAndClose: true,
    closeOnClickModal: false,
    type: 'info',
  }
)

Особенности опций:

  • distinguishCancelAndClose: позволяет различать нажатие кнопки отмены и закрытие окна через крестик.
  • closeOnClickModal: отключает закрытие окна при клике вне модального окна.
  • showClose: управление видимостью кнопки закрытия (по умолчанию true).

Использование Message Box с формами

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

import { reactive } from 'vue';

const formData = reactive({ name: '', email: '' });

function submitForm() {
  ElMessageBox.confirm(
    `Вы хотите отправить данные для ${formData.name}?`,
    'Подтверждение отправки',
    { type: 'warning' }
  )
  .then(() => {
    console.log('Форма отправлена:', formData);
  })
  .catch(() => {
    console.log('Отправка отменена');
  });
}

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

Message Box с произвольным содержимым (HTML и компоненты Vue)

Для более сложных подтверждений можно вставлять HTML или компоненты Vue в текст окна:

ElMessageBox.confirm(
  '<p>Вы собираетесь удалить <strong>все записи</strong>. Это действие нельзя отменить.</p>',
  'Критическое действие',
  {
    dangerouslyUseHTMLString: true,
    type: 'error'
  }
);

Важно: использование dangerouslyUseHTMLString требует осторожности, чтобы избежать XSS-уязвимостей.

Также возможно внедрение Vue-компонента в Message Box с помощью слотов через API ElMessageBox и h из vue:

import { h } from 'vue';
import CustomComponent from './CustomComponent.vue';

ElMessageBox({
  title: 'Подтверждение',
  message: h(CustomComponent, { propValue: 123 }),
  showCancelButton: true,
  confirmButtonText: 'Принять',
  cancelButtonText: 'Отмена'
});

Асинхронные операции внутри подтверждения

Message Box удобно комбинировать с асинхронными функциями, например, для подтверждения удаления на сервере:

async function deleteItem(id) {
  try {
    await ElMessageBox.confirm(
      'Удалить этот элемент навсегда?',
      'Удаление элемента',
      { type: 'warning' }
    );
    await api.delete(`/items/${id}`);
    console.log('Элемент удалён на сервере');
  } catch {
    console.log('Удаление отменено');
  }
}

Это гарантирует, что серверная операция будет выполнена только после подтверждения пользователя.

Встроенные типы Message Box

Element Plus предоставляет четыре стандартных типа модального окна для подтверждений:

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

Использование типов автоматически задаёт иконку, цвет кнопок и общий визуальный стиль окна.

Гибкое управление результатом

Можно комбинировать async/await и try/catch для более читаемого кода:

async function confirmAction() {
  try {
    await ElMessageBox.confirm('Продолжить действие?', 'Подтверждение');
    console.log('Действие подтверждено');
  } catch {
    console.log('Действие отменено');
  }
}

Такой подход повышает читаемость и упрощает работу с последовательными асинхронными вызовами в Vue-компонентах.

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

Оглавление