mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 09:20:51 +08:00
f12000f9c2
* feat: add website * chore: fix
5.8 KiB
5.8 KiB
国际化
Element 组件内部默认使用中文,若希望使用其他语言,则需要进行多语言设置。以英文为例,在 main.js 中:
// 完整引入 Element
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI, { locale })
或
// 按需引入 Element
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'
// 设置语言
locale.use(lang)
// 引入组件
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
如果使用其它语言,默认情况下中文语言包依旧是被引入的,可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。
webpack.config.js
{
plugins: [
new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
]
}
兼容 vue-i18n@5.x
Element 兼容 vue-i18n@5.x,搭配使用能更方便地实现多语言切换。
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Element from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(VueI18n)
Vue.use(Element)
Vue.config.lang = 'zh-cn'
Vue.locale('zh-cn', zhLocale)
Vue.locale('en', enLocale)
兼容其他 i18n 插件
如果不使用 vue-i18n@5.x
,而是用其他的 i18n 插件,Element 将无法兼容,但是可以自定义 Element 的 i18n 的处理方法。
import Vue from 'vue'
import Element from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(Element, {
i18n: function (path, options) {
// ...
}
})
兼容 vue-i18n@6.x
默认不支持 6.x 的 vue-i18n
,你需要手动处理。
import Vue from 'vue'
import Element from 'element-ui'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(VueI18n)
const messages = {
en: {
message: 'hello',
...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)
},
zh: {
message: '你好',
...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)
}
}
// Create VueI18n instance with options
const i18n = new VueI18n({
locale: 'en', // set locale
messages, // set locale messages
})
Vue.use(Element, {
i18n: (key, value) => i18n.t(key, value)
})
new Vue({ i18n }).$mount('#app')
按需加载里定制 i18n
import Vue from 'vue'
import DatePicker from 'element/lib/date-picker'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import ElementLocale from 'element-ui/lib/locale'
Vue.use(VueI18n)
Vue.use(DatePicker)
const messages = {
en: {
message: 'hello',
...enLocale
},
zh: {
message: '你好',
...zhLocale
}
}
// Create VueI18n instance with options
const i18n = new VueI18n({
locale: 'en', // set locale
messages, // set locale messages
})
ElementLocale.i18n((key, value) => i18n.t(key, value))
通过 CDN 的方式加载语言文件
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/element-ui"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
<script>
ELEMENT.locale(ELEMENT.lang.en)
</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-ui"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
<script>
Vue.locale('en', ELEMENT.lang.en)
Vue.locale('zh-cn', ELEMENT.lang.zhCN)
</script>
目前 Element 内置了以下语言:
- 简体中文(zh-CN)
- 英语(en)
- 德语(de)
- 葡萄牙语(pt)
- 西班牙语(es)
- 丹麦语(da)
- 法语(fr)
- 挪威语(nb-NO)
- 繁体中文(zh-TW)
- 意大利语(it)
- 韩语(ko)
- 日语(ja)
- 荷兰语(nl)
- 越南语(vi)
- 俄语(ru-RU)
- 土耳其语(tr-TR)
- 巴西葡萄牙语(pt-br)
- 波斯语(fa)
- 泰语(th)
- 印尼语(id)
- 保加利亚语(bg)
- 波兰语(pl)
- 芬兰语(fi)
- 瑞典语(sv-SE)
- 希腊语(el)
- 斯洛伐克语(sk)
- 加泰罗尼亚语(ca)
- 捷克语(cs-CZ)
- 乌克兰语(ua)
- 土库曼语(tk)
- 泰米尔语(ta)
- 拉脱维亚语(lv)
- 南非荷兰语(af-ZA)
- 爱沙尼亚语(ee)
- 斯洛文尼亚语(sl)
- 阿拉伯语(ar)
- 希伯来语(he)
- 立陶宛语(lt)
- 蒙古语(mn)
- 哈萨克斯坦语(kz)
- 匈牙利语(hu)
- 罗马尼亚语(ro)
- 库尔德语(ku)
- 维吾尔语(ug-CN)
- 高棉语(km)
- 塞尔维亚语(sr)
- 巴斯克语(eu)
- 吉尔吉斯语(kg)
- 亚美尼亚语 (hy)
- 克罗地亚 (hr)
- 世界语 (eo)
如果你需要使用其他的语言,欢迎贡献 PR:只需在 这里 添加一个语言配置文件即可。