2020-08-13 15:18:26 +08:00
## Internationalisation
2020-11-09 14:53:43 +08:00
La langue par défaut d'Element Plus est le Anglais. Si vous souhaitez utiliser une autre langue, il vous faudra la configurer. Par exemple, dans votre fichier d'entrée, si vous importez Element Plus entièrement:
2020-08-13 15:18:26 +08:00
```javascript
2020-10-26 17:16:22 +08:00
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
2020-11-09 14:53:43 +08:00
import locale from 'element-plus/lib/locale/lang/fr'
2020-08-13 15:18:26 +08:00
2020-10-26 17:16:22 +08:00
createApp(App).use(ElementPlus, { locale })
2020-08-13 15:18:26 +08:00
```
2020-10-16 11:14:34 +08:00
Ou si vous importez Element Plus à la demande:
2020-08-13 15:18:26 +08:00
```javascript
import Vue from 'vue'
2020-11-23 16:28:06 +08:00
import { ElButton, ElSelect } from 'element-plus'
2020-11-09 14:53:43 +08:00
import lang from 'element-plus/lib/locale/lang/fr'
2020-10-16 11:14:34 +08:00
import locale from 'element-plus/lib/locale'
2020-08-13 15:18:26 +08:00
// configure la langue
locale.use(lang)
// importe les composants
2020-11-23 16:28:06 +08:00
Vue.component(ElButton.name, ElButton)
Vue.component(ElSelect.name, ElSelect)
2020-08-13 15:18:26 +08:00
```
2020-11-09 14:53:43 +08:00
La pack de la langue Anglais est importé par défaut, même si vous configurez une autre langue. En utilisant le `NormalModuleReplacementPlugin` fournit par webpack vous pouvez remplacer la locale par défaut:
2020-08-13 15:18:26 +08:00
webpack.config.js
```javascript
{
plugins: [
2020-11-09 14:53:43 +08:00
new webpack.NormalModuleReplacementPlugin(/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/, 'element-plus/lib/locale/lang/fr')
2020-08-13 15:18:26 +08:00
]
}
```
## Compatible avec `vue-i18n@5.x`
2020-10-16 11:14:34 +08:00
Element Plus est compatible avec [vue-i18n@5.x ](https://github.com/kazupon/vue-i18n ), ce qui rend le changement de langue encore plus simple.
2020-08-13 15:18:26 +08:00
```javascript
import Vue from 'vue'
import VueI18n from 'vue-i18n'
2020-10-16 11:19:36 +08:00
import ElementPlus from 'element-plus'
2020-10-16 11:14:34 +08:00
import enLocale from 'element-plus/lib/locale/lang/en'
2020-11-14 01:39:03 +08:00
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
2020-10-16 11:22:08 +08:00
import App from './App.vue';
2020-08-13 15:18:26 +08:00
2020-10-16 11:22:08 +08:00
const app = createApp(App)
app.use(ElementPlus)
2020-08-13 15:18:26 +08:00
Vue.use(VueI18n)
Vue.config.lang = 'zh-cn'
Vue.locale('zh-cn', zhLocale)
Vue.locale('en', enLocale)
```
## Compatible avec d'autres plugins i18n
2020-10-16 11:14:34 +08:00
Element Plus n'est pas forcément compatible avec d'autres plugins i18n que vue-i18n, mais vous pouvez configurer le fonctionnement i18n.
2020-08-13 15:18:26 +08:00
```javascript
import Vue from 'vue'
2020-10-16 11:19:36 +08:00
import ElementPlus from 'element-plus'
2020-10-16 11:14:34 +08:00
import enLocale from 'element-plus/lib/locale/lang/en'
2020-11-14 01:39:03 +08:00
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
2020-08-13 15:18:26 +08:00
Vue.use(Element, {
i18n: function (path, options) {
// ...
}
})
```
## Compatible avec `vue-i18n@6.x`
Vous devrez le configurer manuellement pour la compatibilité avec `6.x` .
```javascript
import Vue from 'vue'
2020-10-16 11:19:36 +08:00
import ElementPlus from 'element-plus'
2020-08-13 15:18:26 +08:00
import VueI18n from 'vue-i18n'
2020-10-16 11:14:34 +08:00
import enLocale from 'element-plus/lib/locale/lang/en'
2020-11-14 01:39:03 +08:00
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
2020-08-13 15:18:26 +08:00
Vue.use(VueI18n)
const messages = {
en: {
message: 'hello',
...enLocale // Ou utilisez `Object.assign({ message: 'hello' }, enLocale)`
},
zh: {
message: '你好',
...zhLocale // Ou utilisez `Object.assign({ message: '你好' }, zhLocale)`
}
}
// Crée l'instance de VueI18n avec ses options
const i18n = new VueI18n({
locale: 'en', // indique la locale
messages, // indique les messages
})
Vue.use(Element, {
i18n: (key, value) => i18n.t(key, value)
})
new Vue({ i18n }).$mount('#app')
```
## i18n personnalisée dans les composants à la demande
```js
import Vue from 'vue'
import DatePicker from 'element/lib/date-picker'
import VueI18n from 'vue-i18n'
2020-10-16 11:14:34 +08:00
import enLocale from 'element-plus/lib/locale/lang/en'
2020-11-14 01:39:03 +08:00
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
2020-10-16 11:14:34 +08:00
import ElementLocale from 'element-plus/lib/locale'
2020-08-13 15:18:26 +08:00
Vue.use(VueI18n)
Vue.use(DatePicker)
const messages = {
en: {
message: 'hello',
...enLocale
},
zh: {
message: '你好',
...zhLocale
}
}
// Crée l'instance de VueI18n avec ses options
const i18n = new VueI18n({
locale: 'en', // indique la locale
messages, // indique les messages
})
ElementLocale.i18n((key, value) => i18n.t(key, value))
```
## Import via un CDN
```html
< script src = "//unpkg.com/vue" > < / script >
2020-10-16 11:14:34 +08:00
< script src = "//unpkg.com/element-plus" > < / script >
< script src = "//unpkg.com/element-plus/lib/umd/locale/en.js" > < / script >
2020-08-13 15:18:26 +08:00
< script >
ELEMENT.locale(ELEMENT.lang.en)
< / script >
```
Compatible avec `vue-i18n`
```html
< script src = "//unpkg.com/vue" > < / script >
< script src = "//unpkg.com/vue-i18n/dist/vue-i18n.js" > < / script >
2020-10-16 11:14:34 +08:00
< script src = "//unpkg.com/element-plus" > < / script >
2020-11-14 01:39:03 +08:00
< script src = "//unpkg.com/element-plus/lib/umd/locale/zh-cn.js" > < / script >
2020-10-16 11:14:34 +08:00
< script src = "//unpkg.com/element-plus/lib/umd/locale/en.js" > < / script >
2020-08-13 15:18:26 +08:00
< script >
Vue.locale('en', ELEMENT.lang.en)
Vue.locale('zh-cn', ELEMENT.lang.zhCN)
< / script >
```
2020-10-16 11:14:34 +08:00
Actuellement, Element Plus supporte les langues suivantes:
2020-08-13 15:18:26 +08:00
< ul class = "language-list" >
2020-11-09 14:53:43 +08:00
< li > Chinois simplifié (zh-cn)< / li >
2020-08-13 15:18:26 +08:00
< li > Anglais (en)< / li >
< li > Allemand (de)< / li >
< li > Portugais (pt)< / li >
< li > Espagnol (es)< / li >
< li > Danois (da)< / li >
< li > Français (fr)< / li >
2020-11-09 14:53:43 +08:00
< li > Norvégien (nb-no)< / li >
< li > Chinois traditionnel (zh-tw)< / li >
2020-08-13 15:18:26 +08:00
< li > Italien (it)< / li >
< li > Coréen (ko)< / li >
< li > Japonais (ja)< / li >
< li > Néerlandais (nl)< / li >
< li > Vietnamien (vi)< / li >
2020-11-19 15:58:25 +08:00
< li > Russe (ru)< / li >
< li > Turque (tr)< / li >
2020-08-13 15:18:26 +08:00
< li > Portugais brésilien (pt-br)< / li >
< li > Farsi (fa)< / li >
< li > Thaï (th)< / li >
< li > Indonésien (id)< / li >
< li > Bulgare (bg)< / li >
< li > Polonais (pl)< / li >
< li > Finnois (fi)< / li >
2020-11-19 15:58:25 +08:00
< li > Suédois (sv)< / li >
2020-08-13 15:18:26 +08:00
< li > Grec (el)< / li >
< li > Slovaque (sk)< / li >
< li > Catalan (ca)< / li >
2020-11-19 15:58:25 +08:00
< li > Tchèque (cs)< / li >
< li > Ukrainien (uk)< / li >
2020-08-13 15:18:26 +08:00
< li > Turkmène (tk)< / li >
< li > Tamoul (ta)< / li >
< li > Letton (lv)< / li >
2020-11-19 15:58:25 +08:00
< li > Afrikaans (af)< / li >
< li > Estonien (et)< / li >
2020-08-13 15:18:26 +08:00
< li > Slovène (sl)< / li >
< li > Arabe (ar)< / li >
< li > Hébreu (he)< / li >
< li > Lituanien (lt)< / li >
< li > Mongol (mn)< / li >
2020-11-19 15:58:25 +08:00
< li > Kazakh (kk)< / li >
2020-08-13 15:18:26 +08:00
< li > Hongrois (hu)< / li >
< li > Roumain (ro)< / li >
< li > Kurde (ku)< / li >
2020-11-09 14:53:43 +08:00
< li > Ouïghour (ug-cn)< / li >
2020-08-13 15:18:26 +08:00
< li > Khmer (km)< / li >
< li > Serbe (sr)< / li >
< li > Basque (eu)< / li >
2020-11-19 15:58:25 +08:00
< li > Kirghize (ky)< / li >
< li > Arménien (hy-am)< / li >
2020-08-13 15:18:26 +08:00
< li > Croate (hr)< / li >
< li > Espéranto (eo)< / li >
< / ul >
2020-11-09 14:53:43 +08:00
Si votre langue n'apparaît pas dans la liste, n'hésitez pas a contribuer: ajoutez simplement un fichier de configuration [ici ](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang ) et créez une pull request.