Глобальные методы

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

Основные глобальные методы

  1. ElMessage Используется для отображения временных сообщений пользователю. Сообщения могут быть информационными, успешными, предупреждающими или ошибочными.

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

    import { ElMessage } from 'element-plus'

ElMessage({
  message: 'Операция выполнена успешно',
  type: 'success',
  duration: 3000
})

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

    • message — текст сообщения.
    • type — тип сообщения: 'success', 'warning', 'info', 'error'.
    • duration — время отображения в миллисекундах (по умолчанию 3000).

    Методы сокращённой записи для удобства:

    ElMessage.success('Успех')
ElMessage.warning('Предупреждение')
ElMessage.info('Информация')
ElMessage.error('Ошибка')

  2. ElNotification Предназначен для отображения уведомлений, которые могут содержать заголовок, текст и иконку. Отличается от ElMessage тем, что уведомления фиксируются на экране и могут быть закрыты пользователем.

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

    import { ElNotification } from 'element-plus'

ElNotification({
  title: 'Важное уведомление',
  message: 'Произошло обновление данных',
  type: 'info',
  duration: 5000
})

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

    • title — заголовок уведомления.
    • message — основной текст.
    • type — 'success' | 'warning' | 'info' | 'error'.
    • position — позиция на экране: 'top-right', 'top-left', 'bottom-right', 'bottom-left'.

    Управление уведомлениями:

    const notification = ElNotification({
  title: 'Тест',
  message: 'Закрытие через 5 секунд',
  duration: 5000
})
// Закрыть уведомление программно
notification.close()

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

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

    import { ElMessageBox } from 'element-plus'

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

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

    • ElMessageBox.alert(message, title, options) — простой информационный диалог.
    • ElMessageBox.confirm(message, title, options) — диалог с подтверждением и отменой.
    • ElMessageBox.prompt(message, title, options) — диалог с полем ввода.

    Настройка опций:

    • confirmButtonText и cancelButtonText — текст кнопок.
    • type — 'success' | 'warning' | 'info' | 'error'.
    • inputPattern и inputValidator — регулярное выражение или функция для валидации ввода.

Настройка глобальных методов

Все глобальные методы могут быть сконфигурированы при инициализации приложения Vue через app.config.globalProperties, что позволяет задать единый стиль или поведение для сообщений и уведомлений.

Пример глобальной конфигурации сообщений:

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)

app.config.globalProperties.$message = (options) => {
  return ElMessage({
    duration: 4000,
    ...options
  })
}

app.mount('#app')

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

  • Использовать ElMessage для кратких информационных сообщений, не требующих взаимодействия пользователя.
  • Использовать ElNotification для более заметных уведомлений, которые должны оставаться на экране дольше.
  • Использовать ElMessageBox для действий, требующих подтверждения или ввода данных.
  • Настраивать глобальные параметры через app.config.globalProperties, чтобы унифицировать стиль и поведение сообщений во всём приложении.

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

Оглавление