mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-10 20:39:48 +08:00
f45a57178a
* Add support to x vversion from npm * Add support to x vversion from npm * Add support to x vversion from npm * Add documentation for current repository
97 lines
2.6 KiB
Markdown
Executable File
97 lines
2.6 KiB
Markdown
Executable File
# I18n
|
|
|
|
This project is a collection of internationalized i18n solutions. Implemented via [vue-i18n](https://github.com/kazupon/vue-i18n).
|
|
|
|
Since the project's ui framework uses `element`, internationalization also needs to be internationalized.
|
|
[code](https://github.com/adempiere/adempiere-vue/blob/master/src/lang/index.js).
|
|
At the same time, the current `lang` language save in the `cookie`, and the last language setting can be remembered for opening the page next time.
|
|
|
|
## Global lang
|
|
|
|
Code: [@/lang](https://github.com/adempiere/adempiere-vue/tree/master/src/lang)
|
|
Currently set English and Chinese languages.
|
|
|
|
Meanwhile, import a language package in `@/lang/index.js` for `element-ui`.
|
|
|
|
## Async lang
|
|
|
|
There are some langs that are needed for specific pages, such as the `@/views/i18n` page, you can use async lang.
|
|
|
|
```js
|
|
import local from './local'
|
|
|
|
this.$i18n.mergeLocaleMessage('en', local.en)
|
|
this.$i18n.mergeLocaleMessage('zh', local.zh)
|
|
```
|
|
|
|
# Use $t in js
|
|
|
|
If you use a component such as `select`, its value comes through `v-for`, such as:
|
|
|
|
```html
|
|
<el-select v-model="value">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"/>
|
|
</el-select>
|
|
```
|
|
|
|
```js
|
|
this.options = [
|
|
{
|
|
value: '1',
|
|
label: this.$t('i18nView.one')
|
|
},
|
|
{
|
|
value: '2',
|
|
label: this.$t('i18nView.two')
|
|
},
|
|
{
|
|
value: '3',
|
|
label: this.$t('i18nView.three')
|
|
}
|
|
]
|
|
```
|
|
|
|
In this case, i18n will only be executed once, because `this.options` in js will only be executed once during `created`, and its data will not change as your local `lang` changes, so You need to manually reset `this.options` when the `lang` changes.
|
|
|
|
```js
|
|
export default {
|
|
watch: {
|
|
lang() {
|
|
this.setOptions()
|
|
}
|
|
},
|
|
methods: {
|
|
setOptions() {
|
|
this.options = [
|
|
{
|
|
value: '1',
|
|
label: this.$t('i18nView.one')
|
|
},
|
|
{
|
|
value: '2',
|
|
label: this.$t('i18nView.two')
|
|
},
|
|
{
|
|
value: '3',
|
|
label: this.$t('i18nView.three')
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Remove i18n
|
|
|
|
In `src/main.js` remove `import i18n from './lang'` and delete `src/lang` folder.
|
|
|
|
And remove `this.$t('route.xxxx')` in `src/layout/components/Levelbar`、`src/layout/components/SidebarItem`、`src/layout/components/TabsView` or others.
|
|
|
|
After the <Badge text="v4.1.0+"/> version, the default master will no longer provide i18n. Because most users are not need i18n, the removal of i18n workload is quite large.
|
|
|
|
If you have i18n requirements, please use [i18n Branch](https://github.com/adempiere/adempiere-vue/tree/i18n), which is updated synchronously with master.
|