Глобальная конфигурация библиотеки

Для начала работы с Element Plus необходимо его установить через npm или yarn:

npm install element-plus --save

или

yarn add element-plus

После установки библиотеку можно подключить глобально в проект на Vue 3:

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

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

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

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

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

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

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);

app.use(ElementPlus, {
  size: 'large',       // глобальный размер всех компонентов: medium, small, mini
  zIndex: 3000,        // базовый z-index для всплывающих элементов
  locale: null          // язык (по умолчанию английский)
});
  • size – задает стандартный размер компонентов. Доступные значения: medium (по умолчанию), small, mini, large.
  • zIndex – определяет начальный уровень наложения для всплывающих окон, таких как Dialog или Popover.
  • locale – позволяет глобально установить язык интерфейса. Можно импортировать локаль, например:
import { ElLocale } from 'element-plus';
import ru from 'element-plus/es/locale/lang/ru';

app.use(ElementPlus, {
  locale: ru
});

Настройка тем и стилей

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

@use "element-plus/theme-chalk/src/index" with (
  $--color-primary: #409eff,
  $--font-size-base: 16px
);

Это позволяет изменить:

  • Основной цвет ($--color-primary)
  • Размер шрифтов ($--font-size-base)
  • Цвета кнопок, границ, фона модальных окон

Для динамической смены темы можно использовать JavaScript API:

import { ElMessage } from 'element-plus';
import 'element-plus/theme-chalk/el-message.css';

ElMessage({
  message: 'Тема успешно применена',
  type: 'success'
});

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

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

  • $message – для уведомлений
  • $notify – для глобальных уведомлений
  • $msgbox – для модальных окон
  • $alert / $confirm / $prompt – специализированные модальные окна

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

import { ElMessage } from 'element-plus';

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

Можно глобально задать поведение сообщений через конфигурацию:

app.config.globalProperties.$ELEMENT = {
  size: 'small',
  zIndex: 2000
};

Локализация и международная поддержка

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

import ru from 'element-plus/es/locale/lang/ru';
import { locale } from 'element-plus';

locale(ru);

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

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

Настройка глобальных размеров и стилей через provide/inject

Vue 3 позволяет использовать механизм provide/inject, чтобы передавать глобальные параметры компонентам Element Plus:

app.provide('ELEMENT_SIZE', 'small'); // глобальный размер компонентов

В компоненте:

<template>
  <el-button>Нажми меня</el-button>
</template>

<script setup>
import { inject } from 'vue';
const size = inject('ELEMENT_SIZE'); // получаем глобальный размер
</script>

Такой подход позволяет гибко управлять параметрами без прямой зависимости от глобального объекта app.config.globalProperties.

Подключение и конфигурация иконок

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

import * as ElementPlusIconsVue from '@element-plus/icons-vue';

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

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

  • Определять стандартный размер иконок
  • Управлять цветовой схемой через CSS переменные
  • Использовать кастомные наборы иконок вместо стандартных

Глобальные события и перехватчики

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

app.config.globalProperties.$ELEMENT = {
  size: 'medium',
  zIndex: 2000,
  message: { duration: 5000 },
  dialog: { draggable: true }
};

Это задает единые правила для всех сообщений и диалогов в приложении:

  • Длительность сообщений
  • Поведение модальных окон (например, draggable)
  • Стандартный zIndex для всплывающих компонентов

Использование глобальной конфигурации в TypeScript

При работе с TypeScript можно расширить типизацию глобального объекта app.config.globalProperties:

import { ComponentCustomProperties } from 'vue';
import { ElMessage } from 'element-plus';

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $message: typeof ElMessage;
  }
}

Это обеспечивает автодополнение и строгую типизацию при использовании глобальных методов Element Plus.

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

Оглавление