国际化
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>
日期和时间本地化
我们在诸如 DatePicker
的组件中使用了 Day.js 库来管理日期和时间。 为了让国际化完全生效,在 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)
- 老挝语 (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)