Глобальные параметры компонентов

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

Использование app.config.globalProperties

В Vue 3, на базе которого построен Element Plus, глобальные свойства можно устанавливать через app.config.globalProperties. Для Element Plus это чаще всего применяется через объект ElMessage, ElNotification или другие сервисные методы:

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

const app = createApp(App)

app.use(ElementPlus, {
  size: 'medium',         // Устанавливает глобальный размер всех компонентов
  zIndex: 3000            // Задает глобальный z-index для всплывающих элементов
})

app.mount('#app')

Здесь параметр size может принимать значения 'large', 'default' или 'small', что автоматически влияет на все компоненты, поддерживающие этот атрибут. Параметр zIndex определяет порядок наложения всплывающих элементов, таких как модальные окна, уведомления и всплывающие подсказки.

Глобальные настройки локализации

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

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'
import locale from 'element-plus/es/locale/lang/ru'

const app = createApp(App)

app.use(ElementPlus, { locale })

app.mount('#app')

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

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

Размер компонентов является одной из ключевых глобальных настроек. Он может задаваться как через объект при подключении ElementPlus, так и через отдельное свойство каждого компонента. Преимущество глобальной настройки заключается в том, что изменение размера в одном месте обновляет все элементы в приложении:

app.use(ElementPlus, {
  size: 'small'
})

Поддерживаемые значения:

  • 'large' – увеличенные элементы с дополнительными отступами
  • 'default' – стандартный размер
  • 'small' – компактные элементы, подходящие для плотного интерфейса

Глобальная конфигурация уведомлений и сообщений

Сервисы, такие как ElMessage и ElNotification, также поддерживают глобальные настройки:

import { ElMessage } from 'element-plus'

ElMessage({
  message: 'Глобальная настройка уведомлений работает!',
  type: 'success',
  duration: 5000,
  showClose: true
})

Чтобы установить глобальные значения по умолчанию для всех сообщений, можно использовать app.config.globalProperties:

app.config.globalProperties.$ELEMENT = {
  size: 'medium',
  message: { duration: 4000, showClose: true }
}

Все вызовы ElMessage будут использовать эти параметры, если в конкретном вызове не указаны свои.

Настройка глобального z-index

В Element Plus все всплывающие элементы управляются через zIndex. Чтобы избежать конфликтов при использовании модальных окон, всплывающих подсказок и уведомлений, рекомендуется задавать глобальный базовый z-index:

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

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

Использование глобальной темы и стилей

Хотя глобальная тема Element Plus в основном управляется через SCSS-переменные, можно использовать объект глобальной конфигурации для указания стандартного цвета или размера компонентов:

import 'element-plus/dist/index.css'

app.use(ElementPlus, {
  size: 'default',
  zIndex: 3000
})

Для более тонкой настройки можно импортировать SCSS-файл и переопределять переменные $--color-primary, $--font-size-base и другие. Это позволяет централизованно изменять стиль всего приложения без необходимости редактировать каждый компонент отдельно.

Примеры применения глобальных параметров

  1. Форма с единым размером всех полей и кнопок:
<template>
  <el-form>
    <el-form-item label="Имя">
      <el-input v-model="name"></el-input>
    </el-form-item>
    <el-button type="primary">Отправить</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return { name: '' }
  }
}
</script>

При глобальной настройке size: 'small' все элементы формы автоматически будут уменьшены.

  1. Глобальные уведомления на всех страницах:
ElNotification({
  title: 'Внимание',
  message: 'Глобальная конфигурация успешно применена',
  type: 'warning'
})

Если установить duration и showClose через глобальную конфигурацию, каждое уведомление будет следовать этим настройкам без дублирования кода.

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

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

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

Оглавление