mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-12 14:24:34 +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
104 lines
2.7 KiB
Markdown
Executable File
104 lines
2.7 KiB
Markdown
Executable File
# 国际化
|
||
|
||
本项目集合了国际化 i18n 方案。通过 [vue-i18n](https://github.com/kazupon/vue-i18n)而实现。
|
||
|
||
由于本项目 ui 框架使用了`element`，所以国际化的同时也要将其国际化。
|
||
[完整代码](https://github.com/adempiere/adempiere-vue/blob/master/src/lang/index.js)。
|
||
同时将当前 `lang` 语言存在 `cookie`之中，为了下次打开页面能记住上次的语言设置。
|
||
|
||
# 全局 lang
|
||
|
||
代码地址: [@/lang](https://github.com/adempiere/adempiere-vue/tree/master/src/lang)
|
||
目前配置了英文和中文两种语言。
|
||
|
||
同时在 `@/lang/index.js` 中引入了 `element-ui`的语言包
|
||
|
||
**使用：**
|
||
|
||
```js
|
||
// $t 是 vue-i18n 提供的全局方法，更多信息请查看其文档
|
||
$t('login.title')
|
||
```
|
||
|
||
# 异步 lang
|
||
|
||
有一些某些特定页面才需要的 lang，比如 `@/views/i18n-demo` 页面
|
||
|
||
```js
|
||
import local from './local'
|
||
|
||
this.$i18n.mergeLocaleMessage('en', local.en)
|
||
this.$i18n.mergeLocaleMessage('zh', local.zh)
|
||
```
|
||
|
||
# js 中使用 $t
|
||
|
||
如果你使用如 `select`组件，它的值是通过 `v-for`而来，如：
|
||
|
||
```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')
|
||
}
|
||
]
|
||
```
|
||
|
||
这种情况下，国际化只会执行一次，因为在 js 中的`this.options`只会在初始化的时候执行一次，它的数据并不会随着你本地 `lang`的变化而变化，所以需要你在`lang`变化的时候手动重设`this.options`。
|
||
|
||
```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')
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
# 移除国际化
|
||
|
||
在 `src/main.js` 中移除 `import i18n from './lang'` 并且删除 `src/lang` 文件夹。
|
||
|
||
并在 `src/layout/components/Levelbar`、`src/layout/components/SidebarItem`、`src/layout/components/TabsView` 等文件夹中 移除 `this.$t('route.xxxx')` 使用国际化的方式。
|
||
|
||
在<Badge text="v4.1.0+"/>版本之后，默认 master 将不再提供国际化。因为大部分用户其实是用不到国际化的，但移除国际化工作量又相当的大。
|
||
|
||
如果你有国际化需求的请使用 [i18n 分支](https://github.com/adempiere/adempiere-vue/tree/i18n)，它与 master 同步更新。
|