国际化

Element Plus 组件 默认 使用英语，如果你希望使用其他语言，你可以参考下面的方案。

全局配置

Element Plus 提供了全局配置国际化的配置。

  1. import ElementPlus from 'element-plus'
  2. import zhCn from 'element-plus/es/locale/lang/zh-cn'
  4. app.use(ElementPlus, {
  5.   locale: zhCn,
  6. })

ConfigProvider

Element Plus 还提供了一个 Vue 组件 ConfigProvider 用于全局配置国际化的设置。

  1. <template>
  2.   <el-config-provider :locale="locale">
  3.     <app />
  4.   </el-config-provider>
  5. </template>
  7. <script>
  8.   import { defineComponent } from 'vue'
  9.   import { ElConfigProvider } from 'element-plus'
  11.   import zhCn from 'element-plus/lib/locale/lang/zh-cn'
  13.   export default defineComponent({
  14.     components: {
  15.       ElConfigProvider,
  16.     },
  17.     setup() {
  18.       return {
  19.         locale: zhCn,
  20.       }
  21.     },
  22.   })
  23. </script>

CDN 用法

如果通过 CDN 使用 Element Plus ，那么你需要添加以下代码，以下是一个 unpkg 的示例

  1. <script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>
  2. <script>
  3.   app.use(ElementPlus, {
  4.     locale: ElementPlusLocaleZhCn,
  5.   })
  6. </script>

完整文档详见： ConfigProvider

支持的语言列表 国际化 - 图1

  • 简体中文（zh-cn）
  • 美国英语（en）
  • 阿塞拜疆语（az）
  • 德语（de）
  • 葡萄牙语（pt）
  • 西班牙语（es）
  • 丹麦语（da）
  • 法语（fr）
  • 挪威语（nb-NO）
  • 繁体中文（zh-tw）
  • 意大利语（it）
  • 韩语（ko）
  • 日语（ja）
  • 荷兰语（nl）
  • 越南语（vi）
  • 俄语（ru）
  • 土耳其语（tr）
  • 巴西葡萄牙语（pt-br）
  • 波斯语（fa）
  • 泰语（th）
  • 印度尼西亚语（id）
  • 保加利亚语（bg）
  • 普什图语（pa）
  • 波兰语（pl）
  • 芬兰语（fi）
  • 瑞典语（sv）
  • 希腊语（el）
  • 斯洛伐克语（sk）
  • 加泰罗尼亚语（ca）
  • 捷克语（cs）
  • 乌克兰语（uk）
  • 土库曼语（tk）
  • 泰米尔语（ta）
  • 拉脱维亚语（lv）
  • 南非荷兰语（af）
  • 爱沙尼亚语（et）
  • 斯洛文尼亚语（sl）
  • 阿拉伯语（ar）
  • 希伯来语（he）
  • 立陶宛语（lt）
  • 蒙古语（mn）
  • 哈萨克语（kk）
  • 匈牙利语（hu）
  • 罗马尼亚语（ro）
  • 库尔德语（ku）
  • 维吾尔语（ug-cn）
  • 高棉语（km）
  • 塞尔维亚语（sr）
  • 巴斯克语（eu）
  • 吉尔吉斯语（ky）
  • 亚美尼亚语（hy-am）
  • 克罗地亚语（hr）
  • 世界语（eo）
  • 孟加拉语（bn）

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