国际化

PlusProComponents 组件的国际化完全兼容 Element Plus 的国际化，和 Element Plus 一样默认使用英语，如果需要配置国际化，只需要在 Element Plus 语言包的基础上合并 PlusProComponents 的语言包即可。

示例

全局配置

在 Element Plus 的配置上合并语言包。

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// import en from 'element-plus/es/locale/lang/en'
import plusZhCn from 'plus-pro-components/es/locale/lang/zh-cn'
// import plusEn from 'plus-pro-components/es/locale/lang/en'

app.use(ElementPlus, {
  locale: { ...zhCn, ...plusZhCn }
})

ConfigProvider 推荐

在 Element Plus 的 ConfigProvider 合并语言包。

<template>
  <el-config-provider :locale="locale"> *** </el-config-provider>
</template>

<script setup>
  import { ElConfigProvider } from 'element-plus'
  import en from 'element-plus/es/locale/lang/en'
  import zhCn from 'element-plus/es/locale/lang/zh-cn'
  import plusZhCn from 'plus-pro-components/es/locale/lang/zh-cn'
  import plusEn from 'plus-pro-components/es/locale/lang/en'

  const zhCnLocales = {
    ...zhCn,
    ...plusZhCn
  }
  const enLocales = {
    ...en,
    ...plusEn
  }

  const language = ref('zh-cn')
  const locale = computed(() => (language.value === 'zh-cn' ? zhCnLocales : enLocales))

  const toggleLanguage = () => {
    language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
  }
</script>

CDN 用法

提示

PlusProComponents 的所有语言包全局名称都是以PlusProComponentsLocale 开头 然后加上语言包文件名称的驼峰命名。

Element Plus 的所有语言包全局名称都是以 ElementPlusLocale 开头 然后加上语言包文件名称的驼峰命名。

在 CDN 上合并语言包

<script src="//unpkg.com/element-plus/locale/zh-cn.js"></script>
<script src="//unpkg.com/plus-pro-components/locale/zh-cn.js"></script>
<script>
  app.use(ElementPlus, {
    locale: { ...ElementPlusLocaleZhCn, ...PlusProComponentsLocaleZhCn }
  })
</script>

支持的语言列表

• 简体中文(zh-cn)
• American English (en)
• 日语 (ja) v0.1.4 感谢 @maojunkun 贡献

如果你需要使用其他的语言，欢迎贡献 PR，只需在这里添加一个语言配置文件即可。

国际化不起效果？

issues/125

plus-pro-components 小于 0.0.11 版本，使用 npm 安装依赖，导致element-plus版本不一致，进而导致国际化失效，解决方案：

• 方案一：使用 npm 升级element-plus到最新版本即可。

• 方案二： 移除node_modules 文件夹，移除package-lock.json，然后使用pnpm i 重新安装依赖即可。