国际化

Element Plus 的组件**默认**使用英语,如果你希望使用其他语言,请继续阅读。

全局配置

Element Plus 提供了全局配置

main.ts
ts
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

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

全局配置组件

Element Plus 提供了一个 Vue 组件 ConfigProvider 用于全局配置国际化的语言和其他设置。

App.vue
vue
<template>
  <el-config-provider :locale="zhCn">
    <app />
  </el-config-provider>
</template>

<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
</script>

日期和时间本地化

我们在如 DatePicker 的组件中使用了 Day.js 库来管理日期和时间。为了让国际化功能完全生效,在 Day.js 中设置一个正确的 locale 是很重要的。你必须单独引入 Day.js 的 locale 配置文件。

ts
import 'dayjs/locale/zh-cn'

CDN 用法

如果你通过 CDN 的方式使用 Element Plus,那么你需要这样去做,我们再次以 unpkg 为例

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

完整的文档请参考:ConfigProvider

支持的语言列表

  • 简体中文 (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)
  • 老挝语 (lo)
  • 立陶宛语 (lt)
  • 蒙古语 (mn)
  • 哈萨克语 (kk)
  • 匈牙利语 (hu)
  • 罗马尼亚语 (ro)
  • 库尔德语 (ku)
  • 库尔德语 (ckb)
  • 维吾尔语 (ug-cn)
  • 高棉语 (km)
  • 塞尔维亚语 (sr)
  • 巴斯克语 (eu)
  • 吉尔吉斯语 (ky)
  • 亚美尼亚语 (hy-am)
  • 克罗地亚语 (hr)
  • 世界语 (eo)
  • 孟加拉语 (bn)
  • 马来语 (ms)
  • 马达加斯加语 (mg)
  • 斯瓦希里语 (sw)
  • 乌兹别克语 (uz-uz)
  • 埃及阿拉伯语 (ar-eg)
  • 缅甸语 (my)
  • 印地语 (hi)
  • 挪威语 (no)
  • 香港中文 (zh-hk)
  • 澳门中文 (zh-mo)
  • 泰卢固语 (te)

如果你需要其他语言,我们随时欢迎你的 PR,你只需要在 这里 添加一个语言文件。