elementui locale

ElementUI 国际化 (Locale) 配置方法

ElementUI 支持多语言切换，通过引入对应的语言包和设置 locale 属性，可以轻松实现国际化。

引入语言包

ElementUI 提供了多种语言包，默认支持中文（zh-CN）和英文（en），其他语言需手动引入。

// 引入 ElementUI 中文语言包
import locale from 'element-ui/lib/locale/lang/zh-CN';
// 引入 ElementUI 英文语言包
import locale from 'element-ui/lib/locale/lang/en';
// 其他语言如西班牙语
import locale from 'element-ui/lib/locale/lang/es';

全局配置语言

在 Vue 项目的入口文件（如 main.js）中，通过 Vue.use 设置 locale：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 设置语言
Vue.use(ElementUI, { locale });

动态切换语言

如需动态切换语言，可以调用 ElementUI.locale 方法：

// 切换为英文
import enLocale from 'element-ui/lib/locale/lang/en';
ElementUI.locale(enLocale);

// 切换为中文
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';
ElementUI.locale(zhLocale);

结合 Vue I18n 使用

如果项目已使用 vue-i18n，可以集成 ElementUI 的语言包：

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import ElementUI from 'element-ui';
import enLocale from 'element-ui/lib/locale/lang/en';
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'zh-CN', // 默认语言
  messages: {
    'zh-CN': {
      ...zhLocale, // ElementUI 中文
      // 自定义翻译
      message: '你好',
    },
    'en': {
      ...enLocale, // ElementUI 英文
      message: 'Hello',
    },
  },
});

Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value),
});

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

可用语言列表

ElementUI 支持的语言包括但不限于：

• 中文（zh-CN）
• 英文（en）
• 西班牙语（es）
• 德语（de）
• 日语（ja）
• 韩语（ko）

自定义语言

如需扩展或修改语言包，可以基于现有语言包进行调整：

const customLocale = {
  el: {
    pagination: {
      pagesize: '每页条数',
    },
    // 其他组件翻译
  },
};

// 应用自定义语言
ElementUI.locale(customLocale);

通过以上方法，可以灵活配置 ElementUI 的国际化支持，满足多语言项目的需求。