mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 09:20:51 +08:00
229 lines
6.2 KiB
Markdown
229 lines
6.2 KiB
Markdown
## 国際化
|
|
|
|
Element Plusのデフォルト言語は英語です。他の言語を使用したい場合は、i18nの設定を行う必要があります。Element Plusを完全にインポートする場合のエントリーファイル:
|
|
|
|
```javascript
|
|
import { createApp } from 'vue'
|
|
import ElementPlus from 'element-plus'
|
|
import locale from 'element-plus/lib/locale/lang/ja'
|
|
|
|
createApp(App).use(ElementPlus, { locale })
|
|
```
|
|
|
|
または Element Plusをインポートする際は必要に応じて以下の記述します。:
|
|
|
|
```javascript
|
|
import Vue from 'vue'
|
|
import { ElButton, ElSelect } 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(ElButton.name, ElButton)
|
|
Vue.component(ElSelect.name, ElSelect)
|
|
```
|
|
|
|
たとえ、別の言語を使っていても、英語パックはデフォルトでインポートされます。 しかしながら、webpackで提供されている `NormalModuleReplacementPlugin` を使えばデフォルトlocaleを差し替えることが出来ます:
|
|
|
|
webpack.config.js
|
|
```javascript
|
|
{
|
|
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](https://github.com/kazupon/vue-i18n) は互換性があり、 多言語切り替えをより簡単に出来ます。
|
|
|
|
```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)
|
|
```
|
|
|
|
## 他のi18nプラグインとの互換性
|
|
Elementはvue-i18n以外のi18nプラグインとは互換性がないかもしれませんが、Elementがどのように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) {
|
|
// ...
|
|
}
|
|
})
|
|
```
|
|
|
|
## `vue-i18n@6.x` との互換性
|
|
|
|
`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')
|
|
```
|
|
|
|
## オンデマンドコンポーネントのカスタムi18n
|
|
|
|
```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))
|
|
```
|
|
|
|
## CDNを経由してインポート
|
|
|
|
```html
|
|
<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` との互換性
|
|
|
|
```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>
|
|
```
|
|
|
|
現在、Element Plusは以下の言語をフォローしています。:
|
|
<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>
|
|
|
|
もしあなたのターゲット言語が含まれていない場合、貢献することは大歓迎です: 別の言語の設定を追加して [ここで](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang)、プルリクエストを作成してください。
|