Настройка локализации

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

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

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

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import enLocale from 'element-plus/es/locale/lang/en';
import zhLocale from 'element-plus/es/locale/lang/zh-cn';
import { locale } from 'element-plus';

const app = createApp(App);

// Установка английской локали
locale.use(enLocale);

app.use(ElementPlus);
app.mount('#app');

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

  • Локали хранятся в папке element-plus/es/locale/lang.
  • Метод locale.use() переключает язык глобально для всех компонентов.
  • Можно импортировать несколько языков и переключать их динамически в приложении.

Динамическая смена языка

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

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

function switchLanguage(lang) {
  switch (lang) {
    case 'fr':
      locale.use(frLocale);
      break;
    case 'en':
      locale.use(enLocale);
      break;
    case 'zh':
      locale.use(zhLocale);
      break;
  }
}

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

  • Изменение локали мгновенно обновляет интерфейс без перезагрузки страницы.
  • Компоненты автоматически применяют новые строки и форматы даты.

Локализация компонентов форм

Элементы форм, такие как el-form и el-form-item, используют локализованные сообщения об ошибках. При настройке кастомной валидации можно задать собственные строки с учетом текущей локали:

const rules = {
  username: [
    { required: true, message: locale.t('el.form.required', { field: 'Username' }), trigger: 'blur' }
  ]
};

Важные детали:

  • Функция locale.t() позволяет получать локализованные строки по ключу.
  • Поддерживаются плейсхолдеры, что облегчает адаптацию сообщений к разным языкам.

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

Для специфических нужд можно создавать свои объекты локализации:

const customLocale = {
  name: 'ru',
  el: {
    colorpicker: {
      confirm: 'Применить',
      clear: 'Очистить'
    },
    datepicker: {
      now: 'Сейчас',
      today: 'Сегодня',
      cancel: 'Отмена'
    },
    messagebox: {
      confirm: 'Подтвердить',
      cancel: 'Отмена',
      error: 'Неверный ввод'
    },
    // Добавление других компонентов при необходимости
  }
};

locale.use(customLocale);

Преимущества пользовательских локалей:

  • Полный контроль над переводами и форматом текста.
  • Возможность адаптировать язык под корпоративный стиль или терминологию.

Интеграция с библиотеками i18n

Element Plus может быть интегрирован с vue-i18n для более сложной локализации:

import { createI18n } from 'vue-i18n';
import { locale } from 'element-plus';
import en from './locales/en.json';
import ru from './locales/ru.json';

const i18n = createI18n({
  locale: 'ru',
  messages: { en, ru }
});

locale.i18n((key, value) => i18n.global.t(key, value));

Преимущества интеграции с vue-i18n:

  • Единый источник правды для переводов приложения и компонентов Element Plus.
  • Поддержка сложных структур сообщений, включая множественные варианты и параметры.

Локализация формата даты и времени

Компоненты el-date-picker и el-time-picker используют локаль для отображения месяцев, дней недели и формата даты. Для изменения формата достаточно подключить нужный язык и при необходимости задать format:

<el-date-picker
  v-model="date"
  type="date"
  placeholder="Выберите дату"
  format="YYYY-MM-DD"
/>

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

  • Формат по умолчанию берется из локали.
  • Можно комбинировать с Moment.js или Day.js для более сложного форматирования.

Практические советы

  • Для многоязычных приложений хранить локали в отдельных JSON-файлах.
  • Использовать динамическую подгрузку языков через import() для уменьшения размера бандла.
  • Всегда проверять совместимость новых версий Element Plus с локализацией, так как ключи и структуры могут изменяться.

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

Оглавление