Глобальные свойства

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

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

Глобальные свойства настраиваются при инициализации приложения Vue через функцию app.use(ElementPlus, options). Опции задаются объектом, в котором можно указывать параметры, влияющие на работу всех компонентов:

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

const app = createApp(App)

app.use(ElementPlus, {
  size: 'medium',
  zIndex: 3000,
  locale: null // здесь можно подключить локализацию
})

app.mount('#app')

Параметр size

size определяет стандартный размер всех компонентов, поддерживающих настройку размера (кнопки, инпуты, селекты и др.). Доступные значения:

  • 'large' — увеличенный размер элементов
  • 'medium' — средний размер (по умолчанию)
  • 'small' — компактный вариант
  • 'mini' — самый маленький размер

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

<template>
  <el-button>Стандартная кнопка</el-button>
  <el-input placeholder="Введите текст"></el-input>
</template>

Если size установлен в 'small', все компоненты будут отображаться с уменьшенными размерами без необходимости указывать size на каждом отдельном элементе.

Параметр zIndex

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

app.use(ElementPlus, {
  zIndex: 5000
})

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

Локализация (locale)

Element Plus поддерживает глобальную локализацию, что позволяет менять язык всех компонентов. Локализация подключается через объект locale, импортируемый из пакета element-plus/lib/locale:

import { ElLocale, zhCn } from 'element-plus'

app.use(ElementPlus, { locale: zhCn })

Поддерживаются разные языки, включая:

  • Китайский (zhCn)
  • Английский (en)
  • Японский (ja)

После глобальной настройки все компоненты автоматически отображают текстовые элементы на выбранном языке.

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

Помимо свойств, Element Plus предоставляет глобальные методы для уведомлений, диалогов и сообщений, доступные через app.config.globalProperties:

app.config.globalProperties.$message = ElMessage
app.config.globalProperties.$notify = ElNotification

Это позволяет вызывать методы без импорта компонентов в каждом файле:

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

this.$notify({
  title: 'Напоминание',
  message: 'Ваша сессия истекает через 5 минут'
})

Важные глобальные методы

  • $message — вывод коротких уведомлений
  • $notify — полноэкранные уведомления
  • $confirm — модальные окна подтверждения
  • $loading — индикаторы загрузки

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

Перезапись глобальных свойств локально

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

<el-button size="large">Крупная кнопка</el-button>

Даже если глобальный размер установлен как 'small', конкретная кнопка будет отображаться в 'large'. Это позволяет гибко комбинировать глобальные настройки и локальные изменения.

Динамическая смена глобальных свойств

Глобальные свойства можно изменять динамически в процессе работы приложения, используя реактивное состояние Vue. Например, смена темы или языка без перезагрузки страницы:

import { reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'

const globalSettings = reactive({
  size: 'medium',
  locale: zhCn
})

watch(globalSettings, (newSettings) => {
  app.use(ElementPlus, newSettings)
  ElMessage({
    message: `Размер изменен на ${newSettings.size}`,
    type: 'info'
  })
})

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

Практические рекомендации

  • Единый стиль интерфейса: задавать size и zIndex глобально, чтобы все компоненты выглядели согласованно.
  • Локализация сразу при старте приложения: предотвращает мерцание текста на разных языках.
  • Использование глобальных методов: упрощает работу с уведомлениями и диалогами, исключая множественные импорты.
  • Локальные переопределения: применять только там, где нужен особый стиль, чтобы не нарушить глобальный консистентный дизайн.

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

Оглавление