mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 09:20:51 +08:00
8.5 KiB
8.5 KiB
国际化
Element Plus 组件内部默认使用英语,若希望使用其他语言,则需要进行多语言设置。以中文为例,在 main.js 中:
// 完整引入 Element
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn'
createApp(App).use(ElementPlus, { locale })
或
// 按需引入 Element
import Vue from 'vue'
import { ElButton, ElSelect } from 'element-plus'
import lang from 'element-plus/lib/locale/lang/zh-cn'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale'
// 设置语言
locale.use(lang)
// 引入组件
Vue.component(ElButton.name, ElButton)
Vue.component(ElSelect.name, ElSelect)
设置 Day.js 国际化
Element Plus 直接使用了 Day.js 项目的时间日期国际化设置,如月份名称、每周第一天是周几等。并且会自动全局设置已经导入的 Day.js 国际化配置。
import locale from 'element-plus/lib/locale/lang/zh-cn'
import 'dayjs/locale/zh-cn'
// 将自动设置 Day.js 的国际化设置为 'zh-cn'
app.use(ElementPlus, { locale })
当然,如果有需要,你也可以手动设置成其他 Day.js 国际化配置
import 'dayjs/locale/fr'
dayjs.locale('fr')
如果使用其它语言,默认情况下英文语言包依旧是被引入的,可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。
webpack.config.js
{
plugins: [
new webpack.NormalModuleReplacementPlugin(
/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/,
'element-plus/lib/locale/lang/zh-cn',
),
]
}
兼容 vue-i18n@9.x
如果需要查看 VueI18n的文档, 请点击这个链接去查看
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import ElementPlus from 'element-plus'
import enLocale from 'element-plus/lib/locale/lang/en'
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
import App from './App.vue'
const messages = {
[enLocale.name]: {
// el 这个属性很关键,一定要保证有这个属性,
el: enLocale.el,
// 定义您自己的字典,但是请不要和 `el` 重复,这样会导致 ElementPlus 内部组件的翻译失效.
message: {
hello: 'hello world',
},
},
[zhLocale.name]: {
el: zhLocale.el,
// 定义您自己的字典,但是请不要和 `el` 重复,这样会导致 ElementPlus 内部组件的翻译失效.
message: {
hello: '你好,世界',
},
},
testLocale: {
el: {},
// 没有定义 message 字段,会 fallback 回到 en 去, fallbackLocale 的定义在下方 👇
},
}
const i18n = createI18n({
locale: zhLocale.name,
fallbackLocale: enLocale.name,
messages,
})
const app = createApp(App)
app.use(ElementPlus, {
i18n: i18n.global.t,
})
// 要记得使用这个插件.
app.use(i18n)
兼容其他 i18n 插件
如果不使用 vue-i18n@9.x
,而是用其他的 i18n 插件,Element Plus 将无法兼容,但是可以自定义 Element Plus 的 i18n 的处理方法。
:::tip
一旦设置了这个方法,ElementPlus 内置的翻译功能就会失效,会使用用户定义的翻译功能,所以一定要确保翻译方法能够正确的翻译 el.scope.subName
的格式,如果自定义的方法无法翻译 el.select.noData
的格式,将会使组件的文本失效.
:::
import Vue from 'vue'
import ElementPlus from 'element-plus'
import enLocale from 'element-plus/lib/locale/lang/en'
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
// 这是 i18n 函数的函数签名.
type i18n = (...args: any[]) => string
Vue.use(Element, {
i18n: function(path, options) {
// ...
},
// others.
})
按需加载里定制 i18n
如果您需要按需加载翻译文件,请查看按需加载
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import ElementPlus from 'element-plus'
import enLocale from 'element-plus/lib/locale/lang/en'
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
import ElementLocale from 'element-plus/lib/locale'
import App from './App.vue'
const messages = {
[enLocale.name]: {
// el 这个属性很关键,一定要保证有这个属性,
el: enLocale.el,
// 定义您自己的字典,但是请不要和 `el` 重复,这样会导致 ElementPlus 内部组件的翻译失效.
message: {
hello: 'hello world',
},
},
[zhLocale.name]: {
el: zhLocale.el,
// 定义您自己的字典,但是请不要和 `el` 重复,这样会导致 ElementPlus 内部组件的翻译失效.
message: {
hello: '你好,世界',
},
},
testLocale: {
el: {},
// 没有定义 message 字段,会 fallback 回到 en 去, fallbackLocale 的定义在下方 👇
},
}
const i18n = createI18n({
locale: zhLocale.name,
fallbackLocale: enLocale.name,
messages,
})
ElementLocale.i18n(i18n.global.t)
const app = createApp(App)
app.use(i18n)
通过 CDN 的方式加载语言文件
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/element-plus"></script>
<script src="//unpkg.com/element-plus/lib/umd/locale/es.js"></script>
<script src="//unpkg.com/dayjs/locale/zh-cn.js"></script>
<script>
ELEMENT.locale(ELEMENT.lang.zhCn)
</script>
搭配 vue-i18n
使用
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<script src="//unpkg.com/element-plus"></script>
<script src="//unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>
<script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
<script>
const i18n = Vue18n.createI18n({
locale: Element.lang.zhCN.name,
fallbackLocale: Element.lang.en.name,
messages: {
[ELEMENT.lang.en.name]: {
// el 这个属性很关键,一定要保证有这个属性,
el: ELEMENT.lang.en.el,
// 定义您自己的字典,但是请不要和 `el` 重复,这样会导致 ElementPlus 内部组件的翻译失效.
message: {
hello: 'hello world',
},
},
[ELEMENT.lang.zhCN.name]: {
el: ELEMENT.lang.zhCN.el,
// 定义您自己的字典,但是请不要和 `el` 重复,这样会导致 ElementPlus 内部组件的翻译失效.
message: {
hello: '你好,世界',
},
},
testLocale: {
el: {},
// 没有定义 message 字段,会 fallback 回到 en 去.
},
},
})
const app = Vue.createApp()
app.use(i18n)
</script>
目前 Element Plus 内置了以下语言:
- 简体中文(zh-cn)
- 英语(en)
- 德语(de)
- 葡萄牙语(pt)
- 西班牙语(es)
- 丹麦语(da)
- 法语(fr)
- 挪威语(nb-no)
- 繁体中文(zh-tw)
- 意大利语(it)
- 韩语(ko)
- 日语(ja)
- 荷兰语(nl)
- 越南语(vi)
- 俄语(ru)
- 土耳其语(tr)
- 巴西葡萄牙语(pt-br)
- 波斯语(fa)
- 泰语(th)
- 印尼语(id)
- 保加利亚语(bg)
- 波兰语(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)
如果你需要使用其他的语言,欢迎贡献 PR:只需在 这里 添加一个语言配置文件即可。