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

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

Подключение и настройка локализации

Для начала необходимо импортировать нужные локали из пакета element-plus/es/locale:

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import { ElButton } from 'element-plus';
import localeEn from 'element-plus/es/locale/lang/en';
import localeRu from 'element-plus/es/locale/lang/ru';
import { createI18n } from 'vue-i18n';

const messages = {
  en: { message: { hello: 'Hello World' } },
  ru: { message: { hello: 'Привет Мир' } }
};

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

const app = createApp(App);

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

app.mount('#app');

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

localeEn и localeRu — это встроенные языковые пакеты для компонентов Element Plus.
vue-i18n управляет собственными текстами приложения.
Начальный язык задается через locale в createI18n и через locale в Element Plus.

Динамическое переключение языка

Для изменения языка на лету необходимо одновременно обновлять локаль vue-i18n и локаль Element Plus. Пример реализации функции переключения:

import { ElLocale } from 'element-plus';
import localeEn from 'element-plus/es/locale/lang/en';
import localeRu from 'element-plus/es/locale/lang/ru';

function switchLanguage(lang) {
  if (lang === 'en') {
    i18n.global.locale.value = 'en';
    ElLocale.use(localeEn);
  } else if (lang === 'ru') {
    i18n.global.locale.value = 'ru';
    ElLocale.use(localeRu);
  }
}

Особенности реализации:

i18n.global.locale.value — изменяет язык всех компонентов и сообщений приложения.
ElLocale.use() — обновляет язык всех компонентов Element Plus без перезагрузки.

Интеграция с UI элементами

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

<template>
  <el-select v-model="currentLang" placeholder="Выберите язык" @change="switchLanguage">
    <el-option label="Русский" value="ru"></el-option>
    <el-option label="English" value="en"></el-option>
  </el-select>
  <el-button>{{ $t('message.hello') }}</el-button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const currentLang = ref('ru');

    function switchLanguage(lang) {
      if (lang === 'en') {
        i18n.global.locale.value = 'en';
        ElLocale.use(localeEn);
      } else {
        i18n.global.locale.value = 'ru';
        ElLocale.use(localeRu);
      }
    }

    return { currentLang, switchLanguage };
  }
};
</script>

Особенности использования:

v-model обеспечивает реактивное отслеживание выбранного языка.
Использование $t для всех динамических сообщений позволяет синхронизировать язык элементов интерфейса и текста.

Динамическая загрузка языковых пакетов

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

async function loadLanguage(lang) {
  const messages = await import(`./locales/${lang}.js`);
  i18n.global.setLocaleMessage(lang, messages.default);
  i18n.global.locale.value = lang;

  const elementLocale = await import(`element-plus/es/locale/lang/${lang}.js`);
  ElLocale.use(elementLocale.default);
}

Преимущества:

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

Обработка форматов даты и чисел

Element Plus автоматически учитывает локаль при работе с компонентами, такими как DatePicker. Для более точной кастомизации можно использовать vue-i18n:

const i18n = createI18n({
  locale: 'ru',
  messages,
  numberFormats: {
    ru: { currency: { style: 'currency', currency: 'RUB' } },
    en: { currency: { style: 'currency', currency: 'USD' } }
  },
  datetimeFormats: {
    ru: { short: { year: 'numeric', month: '2-digit', day: '2-digit' } },
    en: { short: { year: 'numeric', month: 'short', day: 'numeric' } }
  }
});

Примечание:

Компоненты Element Plus используют локаль ElLocale для базовых элементов UI.
vue-i18n отвечает за отображение текста, чисел, дат и валют в приложении.