mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 17:31:02 +08:00
b942890502
* docs: update i18n * fix: format locale name * chore: update
6.2 KiB
6.2 KiB
国際化
Element Plusのデフォルト言語は英語です。他の言語を使用したい場合は、i18nの設定を行う必要があります。Element Plusを完全にインポートする場合のエントリーファイル:
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import locale from 'element-plus/lib/locale/lang/ja'
Vue.use(ElementUI, { locale })
または Element Plusをインポートする際は必要に応じて以下の記述します。:
import Vue from 'vue'
import { Button, Select } from 'element-plus'
import lang from 'element-plus/lib/locale/lang/ja'
import locale from 'element-plus/lib/locale'
// configure language
locale.use(lang)
// import components
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
たとえ、別の言語を使っていても、英語パックはデフォルトでインポートされます。 しかしながら、webpackで提供されている NormalModuleReplacementPlugin
を使えばデフォルトlocaleを差し替えることが出来ます:
webpack.config.js
{
plugins: [
new webpack.NormalModuleReplacementPlugin(/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/, 'element-plus/lib/locale/lang/ja')
]
}
vue-i18n@5.x
との互換性
Element vue-i18n@5.x は互換性があり、 多言語切り替えをより簡単に出来ます。
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)
他のi18nプラグインとの互換性
Elementはvue-i18n以外のi18nプラグインとは互換性がないかもしれませんが、Elementがどのようにi18nを処理するかをカスタマイズすることができます。
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(Element, {
i18n: function (path, options) {
// ...
}
})
vue-i18n@6.x
との互換性
6.x
との互換性を保つためには、手動で処理する必要があります。
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(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-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))
CDNを経由してインポート
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/element-plus"></script>
<script src="//unpkg.com/element-plus/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-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>
現在、Elementは以下の言語をフォローしています。:
- Simplified Chinese (zh-cn)
- English (en)
- German (de)
- Portuguese (pt)
- Spanish (es)
- Danish (da)
- French (fr)
- Norwegian (nb-no)
- Traditional Chinese (zh-tw)
- Italian (it)
- Korean (ko)
- Japanese (ja)
- Dutch (nl)
- Vietnamese (vi)
- Russian (ru-ru)
- Turkish (tr-tr)
- Brazilian Portuguese (pt-br)
- Farsi (fa)
- Thai (th)
- Indonesian (id)
- Bulgarian (bg)
- Polish (pl)
- Finnish (fi)
- Swedish (sv-se)
- Greek (el)
- Slovak (sk)
- Catalunya (ca)
- Czech (cs-cz)
- Ukrainian (ua)
- Turkmen (tk)
- Tamil (ta)
- Latvian (lv)
- Afrikaans (af-za)
- Estonian (ee)
- Slovenian (sl)
- Arabic (ar)
- Hebrew (he)
- Lithuanian (lt)
- Mongolian (mn)
- Kazakh (kz)
- Hungarian (hu)
- Romanian (ro)
- Kurdish (ku)
- Uighur (ug-cn)
- Khmer (km)
- Serbian (sr)
- Basque (eu)
- Kyrgyz (kg)
- Armenian (hy)
- Croatian (hr)
- Esperanto (eo)
もしあなたのターゲット言語が含まれていない場合、貢献することは大歓迎です: 別の言語の設定を追加して ここで、プルリクエストを作成してください。