国际化

Element UI X 提供了与 Element UI 完全兼容的国际化解决方案，支持 [email protected]、[email protected]+ 以及其他 i18n 插件。

支持的语言

• 中文简体 (zh-CN)
• 繁体中文 (zh-TW)
• 英文 (en)
• 日语 (ja-JP)
• 韩语 (ko-KR)
• 法语 (fr-FR)
• 德语 (de-DE)
• 西班牙语 (es-ES)
• 俄语 (ru-RU)
• 葡萄牙语 (pt-BR)
• 意大利语 (it-IT)
• 阿拉伯语 (ar-SA)
• 法语 (fr-FR)
• 德语 (de-DE)
• 西班牙语 (es-ES)
• 俄语 (ru-RU)
• 葡萄牙语 (pt-BR)
• 意大利语 (it-IT)
• 阿拉伯语 (ar-SA)
• 繁体中文 (zh-TW)

使用方式

1. 完整引入 + 默认语言设置

import Vue from 'vue';
import ElementUIX from 'vue-element-ui-x';
import enLang from 'vue-element-ui-x/lib/locale/lang/en';

Vue.use(ElementUIX, { locale: enLang });

// 其他语言示例
import jaLang from 'vue-element-ui-x/lib/locale/lang/ja';
import frLang from 'vue-element-ui-x/lib/locale/lang/fr';
import deLang from 'vue-element-ui-x/lib/locale/lang/de';

// Vue.use(ElementUIX, { locale: jaLang }); // 日语
// Vue.use(ElementUIX, { locale: frLang }); // 法语
// Vue.use(ElementUIX, { locale: deLang }); // 德语

2. 按需引入 + 手动设置语言

import Vue from 'vue';
import { ElXThinking, ElXSender, locale } from 'vue-element-ui-x';
import enLang from 'vue-element-ui-x/lib/locale/lang/en';

// 设置语言
locale.use(enLang);

// 注册组件
Vue.component(ElXThinking.name, ElXThinking);
Vue.component(ElXSender.name, ElXSender);

3. 兼容 [email protected]

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import ElementUIX, { locale } from 'vue-element-ui-x';

Vue.use(VueI18n);
Vue.use(ElementUIX);

// 配置 [email protected]
Vue.config.lang = 'en';
Vue.locale('en', {
  // 你的应用翻译
  message: 'Hello',
  // Element UI X 翻译
  ...locale.lang.en,
});
Vue.locale('zh-cn', {
  // 你的应用翻译
  message: '你好',
  // Element UI X 翻译
  ...locale.lang['zh-CN'],
});

4. 兼容 [email protected]+

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import ElementUIX, { locale } from 'vue-element-ui-x';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en',
  messages: {
    en: {
      message: 'Hello',
      ...locale.lang.en,
    },
    'zh-CN': {
      message: '你好',
      ...locale.lang['zh-CN'],
    },
  },
});

// 配置 Element UI X 使用 vue-i18n
locale.i18n((key, value) => i18n.t(key, value));

Vue.use(ElementUIX);

new Vue({
  i18n,
  // ...
}).$mount('#app');

5. 兼容其他 i18n 插件

import Vue from 'vue';
import ElementUIX, { locale } from 'vue-element-ui-x';
import myI18n from 'my-i18n-plugin';

// 配置自定义翻译函数
locale.i18n((key, value) => {
  // 你的自定义翻译逻辑
  return myI18n.translate(key, value);
});

Vue.use(ElementUIX);