Создание пользовательской локали

Element Plus предоставляет встроенную поддержку интернационализации (i18n), позволяя адаптировать интерфейс компонентов под разные языки и региональные особенности. Для полноценной работы с локалями важно понимать структуру и возможности кастомизации.

Подключение модулей локализации

Все языковые пакеты находятся в модуле element-plus/es/locale. Например, для использования русского языка:

import { ElButton, ElDatePicker } from 'element-plus';
import ru from 'element-plus/es/locale/lang/ru';
import { locale } from 'element-plus';
  • ElButton, ElDatePicker — примеры компонентов, которые будут использовать локаль.
  • ru — объект локализации, содержащий переводы стандартных элементов и сообщений компонентов.
  • locale — глобальная функция для установки текущей локали.

Установка глобальной локали

Для смены языка интерфейса всех компонентов достаточно вызвать функцию locale:

locale(ru);

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

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

Создание собственной локали

Для разработки кастомного перевода можно создать объект с ключами компонентов:

const myLocale = {
  name: 'my-locale',
  el: {
    colorpicker: {
      confirm: 'Применить',
      clear: 'Очистить'
    },
    datepicker: {
      now: 'Сейчас',
      today: 'Сегодня',
      cancel: 'Отмена',
      confirm: 'ОК',
      week: 'Неделя',
      months: {
        jan: 'Январь',
        feb: 'Февраль',
        mar: 'Март',
        apr: 'Апрель',
        may: 'Май',
        jun: 'Июнь',
        jul: 'Июль',
        aug: 'Август',
        sep: 'Сентябрь',
        oct: 'Октябрь',
        nov: 'Ноябрь',
        dec: 'Декабрь'
      }
    },
    select: {
      loading: 'Загрузка',
      noMatch: 'Совпадений не найдено',
      noData: 'Нет данных',
      placeholder: 'Выберите'
    }
  }
};

Структура объекта:

  • name — уникальный идентификатор локали.
  • el — объект компонентов, содержащий ключи с текстовыми значениями. Каждый компонент имеет собственные ключи для сообщений, кнопок и подсказок.

Подключение кастомной локали

После создания локали её можно установить глобально:

import { locale } from 'element-plus';

locale(myLocale);

Также локаль можно применять локально для отдельных компонентов через v-locale или locale проп:

<template>
  <el-date-picker v-model="date" :locale="myLocale" placeholder="Выберите дату" />
</template>

<script>
import { myLocale } from './locales/my-locale';

export default {
  data() {
    return { date: null, myLocale };
  }
};
</script>

Динамическая смена локали

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

import en from 'element-plus/es/locale/lang/en';
locale(en); // Переключение на английский

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

Обработка нестандартных компонентов

Если в приложении используются кастомные компоненты, которые требуют локализации, их можно интегрировать в объект локали через ключи, например:

const myLocaleExtended = {
  ...myLocale,
  customComponent: {
    save: 'Сохранить',
    cancel: 'Отменить',
    delete: 'Удалить'
  }
};

После этого кастомные компоненты могут получать текст из локали через функцию locale или передаваемые пропсы.

Советы по организации локалей

  • Разделять переводы по файлам для каждого языка (ru.js, en.js, fr.js).
  • Использовать единый формат ключей для всех компонентов, чтобы упрощать добавление новых переводов.
  • При расширении библиотеки с кастомными компонентами добавлять соответствующие ключи в локали сразу.
  • Проверять корректность отображения всех сообщений после смены локали на разных компонентах.

Итоговая структура проекта с локалями

src/
  locales/
    en.js
    ru.js
    my-locale.js
  main.js
  App.vue

main.js:

import { createApp } from 'vue';
import App from './App.vue';
import { locale } from 'element-plus';
import myLocale from './locales/my-locale';

locale(myLocale);

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

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

Оглавление