element-plus/i18n.md at 5e031237e3ba7f90fac07a7f32566636f813a6f4

test/element-plus

Fork 0

mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-14 09:20:51 +08:00

jeremywu 5e031237e3

feat(project): Update with functionality to compat with vue-i18n (#1306 )

2021-01-19 23:49:07 +08:00

8.8 KiB

Raw Blame History

Internationalisation

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:

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import locale from 'element-plus/lib/locale/lang/fr'
import 'dayjs/locale/fr'

createApp(App).use(ElementPlus, { locale })

Ou si vous importez Element Plus à la demande:

import Vue from 'vue'
import { ElButton, ElSelect } from 'element-plus'
import lang from 'element-plus/lib/locale/lang/fr'
import 'dayjs/locale/fr'
import locale from 'element-plus/lib/locale'

// configure la langue
locale.use(lang)

// importe les composants
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 directlly. And will set the global Day.js locale automaticatlly after the locale file is loaded.

import locale from 'element-plus/lib/locale/lang/fr'
import 'dayjs/locale/fr'

// will auto set Day.js locale to 'fr'
app.use(ElementPlus, { locale })

However, you can use another Day.js locale if needed.

import 'dayjs/locale/es'
dayjs.locale('es')

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:

webpack.config.js

{
  plugins: [
    new webpack.NormalModuleReplacementPlugin(
      /element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/,
      'element-plus/lib/locale/lang/fr',
    ),
  ]
}

Compatible avec `vue-i18n@9.x`

Element Plus est compatible avec vue-i18n@9.x, ce qui rend le changement de langue encore plus simple.

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 property is critical, set this in order for ElementPlus translate strings correctly.
    el: enLocale.el,
    // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
    // Because that makes the ElementPlus internal translation invalid.
    message: {
      hello: 'hello world',
    },
  },
  [zhLocale.name]: {
    el: zhLocale.el,
    // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
    // Because that makes the ElementPlus internal translation invalid.
    message: {
      hello: '你好，世界',
    },
  },
  testLocale: {
    el: {},
    // No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇
  },
}

const i18n = createI18n({
  locale: zhLocale.name,
  fallbackLocale: enLocale.name,
  messages,
})

const app = createApp(App)

app.use(ElementPlus, {
  i18n: i18n.global.t,
})

// Remember to use this plugin.
app.use(i18n)

Compatible avec d'autres plugins i18n

Element Plus n'est pas forcément compatible avec d'autres plugins i18n que vue-i18n, mais vous pouvez configurer le fonctionnement i18n.

:::tip Once you set this method, the internal translation function will be invalid, only the customized translation method will be used, be sure that your custom translation method can translate format like el.scope.subName, other wise the internal translation string will be raw string. :::

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'

// The is the signature of i18n method.
type i18n = (...args: any[]) => string
Vue.use(Element, {
  i18n: function(path, options) {
    // ...
  },
  // others.
})

i18n personnalisée dans les composants à la demande

Need translation

If you need to know how to lazy loading translation strings, please check this outLazy loading

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 property is critical, set this in order for ElementPlus translate strings correctly.
    el: enLocale.el,
    // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
    // Because that makes the ElementPlus internal translation invalid.
    message: {
      hello: 'hello world',
    },
  },
  [zhLocale.name]: {
    el: zhLocale.el,
    // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
    // Because that makes the ElementPlus internal translation invalid.
    message: {
      hello: '你好，世界',
    },
  },
  testLocale: {
    el: {},
    // No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇
  },
}

const i18n = createI18n({
  locale: zhLocale.name,
  fallbackLocale: enLocale.name,
  messages,
})

ElementLocale.i18n(i18n.global.t)

const app = createApp(App)
app.use(i18n)

Import via un CDN

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/element-plus"></script>
<script src="//unpkg.com/element-plus/lib/umd/locale/fr.js"></script>
<script src="//unpkg.com/dayjs/locale/fr.js"></script>

<script>
  // Need translation
  const i18n = Vue18n.createI18n({
    locale: Element.lang.zhCN.name,
    fallbackLocale: Element.lang.en.name,
    messages: {
      [ELEMENT.lang.en.name]: {
        // el property is critical, set this in order for ElementPlus translate strings correctly.
        el: ELEMENT.lang.en.el,
        // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
        // Because that makes the ElementPlus internal translation invalid.
        message: {
          hello: 'hello world',
        },
      },
      [ELEMENT.lang.zhCN.name]: {
        el: ELEMENT.lang.zhCN.el,
        // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
        // Because that makes the ElementPlus internal translation invalid.
        message: {
          hello: '你好，世界',
        },
      },
      testLocale: {
        el: {},
        // No message translations, it will fallback to en lang.
      },
    },
  })

  const app = Vue.createApp()
  app.use(i18n)
</script>

Compatible avec 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>
  Vue.locale('en', ELEMENT.lang.en)
  Vue.locale('zh-cn', ELEMENT.lang.zhCN)
</script>

Actuellement, Element Plus supporte les langues suivantes:

Chinois simplifié (zh-cn)
Anglais (en)
Allemand (de)
Portugais (pt)
Espagnol (es)
Danois (da)
Français (fr)
Norvégien (nb-no)
Chinois traditionnel (zh-tw)
Italien (it)
Coréen (ko)
Japonais (ja)
Néerlandais (nl)
Vietnamien (vi)
Russe (ru)
Turque (tr)
Portugais brésilien (pt-br)
Farsi (fa)
Thaï (th)
Indonésien (id)
Bulgare (bg)
Polonais (pl)
Finnois (fi)
Suédois (sv)
Grec (el)
Slovaque (sk)
Catalan (ca)
Tchèque (cs)
Ukrainien (uk)
Turkmène (tk)
Tamoul (ta)
Letton (lv)
Afrikaans (af)
Estonien (et)
Slovène (sl)
Arabe (ar)
Hébreu (he)
Lituanien (lt)
Mongol (mn)
Kazakh (kk)
Hongrois (hu)
Roumain (ro)
Kurde (ku)
Ouïghour (ug-cn)
Khmer (km)
Serbe (sr)
Basque (eu)
Kirghize (ky)
Arménien (hy-am)
Croate (hr)
Espéranto (eo)

Si votre langue n'apparaît pas dans la liste, n'hésitez pas a contribuer: ajoutez simplement un fichier de configuration ici et créez une pull request.

8.8 KiB Raw Blame History Unescape Escape