mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 09:50:58 +08:00
c17332f3a9
* chore: update time picker doc * chore: update * chore: update * chore: update
249 lines
6.4 KiB
Markdown
249 lines
6.4 KiB
Markdown
## Internationalization
|
|
|
|
The default locale of Element Plus is English. If you want to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element Plus entirely:
|
|
|
|
```javascript
|
|
import { createApp } from 'vue'
|
|
import ElementPlus from 'element-plus'
|
|
import locale from 'element-plus/lib/locale/lang/zh-cn'
|
|
import 'dayjs/locale/zh-cn'
|
|
|
|
createApp(App).use(ElementPlus, { locale })
|
|
```
|
|
|
|
Or if you are importing Element Plus on demand:
|
|
|
|
```javascript
|
|
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'
|
|
|
|
// configure language
|
|
locale.use(lang)
|
|
|
|
// import components
|
|
Vue.component(ElButton.name, ElButton)
|
|
Vue.component(ElSelect.name, ElSelect)
|
|
```
|
|
|
|
### Set Day.js locale
|
|
|
|
Element Plus use date time locale (month name, first day of the week ...) from [Day.js](https://day.js.org/) directlly. And will set the global Day.js locale automaticatlly after the locale file is loaded.
|
|
```javascript
|
|
import locale from 'element-plus/lib/locale/lang/zh-cn'
|
|
import 'dayjs/locale/zh-cn'
|
|
|
|
// will auto set Day.js locale to 'zh-cn'
|
|
app.use(ElementPlus, { locale })
|
|
```
|
|
|
|
However, you can use another Day.js locale if needed.
|
|
```javascript
|
|
import 'dayjs/locale/fr'
|
|
dayjs.locale('fr')
|
|
```
|
|
|
|
The English locale is imported by default, even if you're using another locale. But with `NormalModuleReplacementPlugin` provided by webpack you can replace default locale:
|
|
|
|
webpack.config.js
|
|
```javascript
|
|
{
|
|
plugins: [
|
|
new webpack.NormalModuleReplacementPlugin(/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/, 'element-plus/lib/locale/lang/zh-cn')
|
|
]
|
|
}
|
|
```
|
|
|
|
## Compatible with `vue-i18n@5.x`
|
|
|
|
Element Plus is compatible with [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), which makes multilingual switching even easier.
|
|
|
|
```javascript
|
|
import Vue from 'vue'
|
|
import VueI18n 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 app = createApp(App)
|
|
app.use(ElementPlus)
|
|
Vue.use(VueI18n)
|
|
|
|
Vue.config.lang = 'zh-cn'
|
|
Vue.locale('zh-cn', zhLocale)
|
|
Vue.locale('en', enLocale)
|
|
```
|
|
|
|
## Compatible with other i18n plugins
|
|
Element Plus may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element Plus processes i18n.
|
|
|
|
```javascript
|
|
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'
|
|
|
|
Vue.use(ElementPlus, {
|
|
i18n: function (path, options) {
|
|
// ...
|
|
}
|
|
})
|
|
```
|
|
|
|
## Compatible with `vue-i18n@6.x`
|
|
|
|
You need to manually handle it for compatibility with `6.x`.
|
|
|
|
```javascript
|
|
import Vue from 'vue'
|
|
import ElementPlus from 'element-plus'
|
|
import VueI18n from 'vue-i18n'
|
|
import enLocale from 'element-plus/lib/locale/lang/en'
|
|
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
|
|
|
Vue.use(VueI18n)
|
|
|
|
const messages = {
|
|
en: {
|
|
message: 'hello',
|
|
...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)`
|
|
},
|
|
zh: {
|
|
message: '你好',
|
|
...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)`
|
|
}
|
|
}
|
|
// Create VueI18n instance with options
|
|
const i18n = new VueI18n({
|
|
locale: 'en', // set locale
|
|
messages, // set locale messages
|
|
})
|
|
|
|
Vue.use(ElementPlus, {
|
|
i18n: (key, value) => i18n.t(key, value)
|
|
})
|
|
|
|
new Vue({ i18n }).$mount('#app')
|
|
```
|
|
|
|
## Custom i18n in on-demand components
|
|
|
|
```js
|
|
import Vue from 'vue'
|
|
import DatePicker from 'element/lib/date-picker'
|
|
import VueI18n from 'vue-i18n'
|
|
|
|
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'
|
|
|
|
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))
|
|
```
|
|
|
|
## Import via CDN
|
|
|
|
```html
|
|
<script src="//unpkg.com/vue"></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/dayjs/locale/zh-cn.js"></script>
|
|
|
|
<script>
|
|
ELEMENT.locale(ELEMENT.lang.zhCn)
|
|
</script>
|
|
```
|
|
|
|
Compatible with `vue-i18n`
|
|
|
|
```html
|
|
<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>
|
|
Vue.locale('en', ELEMENT.lang.en)
|
|
Vue.locale('zh-cn', ELEMENT.lang.zhCN)
|
|
</script>
|
|
```
|
|
|
|
Currently Element Plus ships with the following languages:
|
|
<ul class="language-list">
|
|
<li>Simplified Chinese (zh-cn)</li>
|
|
<li>English (en)</li>
|
|
<li>German (de)</li>
|
|
<li>Portuguese (pt)</li>
|
|
<li>Spanish (es)</li>
|
|
<li>Danish (da)</li>
|
|
<li>French (fr)</li>
|
|
<li>Norwegian (nb-NO)</li>
|
|
<li>Traditional Chinese (zh-tw)</li>
|
|
<li>Italian (it)</li>
|
|
<li>Korean (ko)</li>
|
|
<li>Japanese (ja)</li>
|
|
<li>Dutch (nl)</li>
|
|
<li>Vietnamese (vi)</li>
|
|
<li>Russian (ru)</li>
|
|
<li>Turkish (tr)</li>
|
|
<li>Brazilian Portuguese (pt-br)</li>
|
|
<li>Farsi (fa)</li>
|
|
<li>Thai (th)</li>
|
|
<li>Indonesian (id)</li>
|
|
<li>Bulgarian (bg)</li>
|
|
<li>Polish (pl)</li>
|
|
<li>Finnish (fi)</li>
|
|
<li>Swedish (sv)</li>
|
|
<li>Greek (el)</li>
|
|
<li>Slovak (sk)</li>
|
|
<li>Catalunya (ca)</li>
|
|
<li>Czech (cs)</li>
|
|
<li>Ukrainian (uk)</li>
|
|
<li>Turkmen (tk)</li>
|
|
<li>Tamil (ta)</li>
|
|
<li>Latvian (lv)</li>
|
|
<li>Afrikaans (af)</li>
|
|
<li>Estonian (et)</li>
|
|
<li>Slovenian (sl)</li>
|
|
<li>Arabic (ar)</li>
|
|
<li>Hebrew (he)</li>
|
|
<li>Lithuanian (lt)</li>
|
|
<li>Mongolian (mn)</li>
|
|
<li>Kazakh (kk)</li>
|
|
<li>Hungarian (hu)</li>
|
|
<li>Romanian (ro)</li>
|
|
<li>Kurdish (ku)</li>
|
|
<li>Uighur (ug-cn)</li>
|
|
<li>Khmer (km)</li>
|
|
<li>Serbian (sr)</li>
|
|
<li>Basque (eu)</li>
|
|
<li>Kyrgyz (ky)</li>
|
|
<li>Armenian (hy-am)</li>
|
|
<li>Croatian (hr)</li>
|
|
<li>Esperanto (eo)</li>
|
|
</ul>
|
|
|
|
If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) and create a pull request.
|