国际化

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

全局配置

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

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

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

ConfigProvider

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

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>

日期和时间本地化

我们使用 Day.js 库来管理组件的日期和时间,例如 DatePicker。 必须在 Day.js 中设置一个适当的区域,以便使国际化充分发挥作用。 您必须分开导入Day.js的区域设置。

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)
  • 立陶宛语(lt)
  • 蒙古语(mn)
  • 哈萨克语(kk)
  • 匈牙利语(hu)
  • 罗马尼亚语(ro)
  • 库尔德语(ku)
  • 库尔德语 (ckb)
  • 维吾尔语 (ug-cn)
  • 高棉语 (km)
  • 塞尔维亚语 (sr)
  • 巴斯克语 (eu)
  • 吉尔吉斯语 (ky)
  • 亚美尼亚语 (hy-am)
  • 克罗地亚语(hr)
  • 世界语 (eo)
  • 孟加拉语 (bn)
  • 马来语 (ms)

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