Former-commit-id: e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly 5793d72d458b7eeaf28a097d026168cebc9fc256 [formerly 9c8de3644bd40a55711e618742e29cce390e4c5f]]]]]
Former-commit-id: 05ca3c8da65f8583c142720628aa6ea71d2dbf45
Former-commit-id: 7a4d2fba696e901db86071ea2810e9c932c976ad
Former-commit-id: c18d3689200ca0e528fbf9bf171f6e1b50131bc3 [formerly 455e9952ca890cd8ad882250cfb9eabd944d44ee]
Former-commit-id: 021fa8191681fe4f22e9a9f40389831a847e9066
Former-commit-id: 1022b7792417ce366901b9d5284762a015dd6d26
Former-commit-id: bed799410be508713cac76b7c8cf02d4457fe996
Former-commit-id: f6787cfaac3404132ad1011e2707e08484708ca9
Former-commit-id: 7a8a3baca9ef30393744fd56def6d608b51dcddd
This commit is contained in:
liyang
2018-07-16 10:43:14 +08:00
parent c53973a35f
commit 1d310c9c7d
496 changed files with 3 additions and 23673 deletions

View File

@@ -1,124 +0,0 @@
# 多国语
多国语插件
::: tip
此文档仅限于演示如何在 `D2Admin` 中使用多国语言设置
:::
公用的语言设置建议放在 `src/i18n`
i18n 文件夹结构如下所示
```
|__index.js // 主文件
|__lang // 语言配置文件夹
| |__cn // 中文
| | |__index.js // 中文 公用配置
| |__ja // 日语
| | |__index.js // 日语 公用配置
| |__en // 英语
| | |__index.js // 英语 公用配置
```
`src/i18n/index.js` 中导入同级lang文件夹内的语言设置并导出一个新的 `VueI18n` 实例供 `main.js` 使用
``` js
import i18n from './i18n'
new Vue({
el: '#app',
store,
i18n, // 使用 i18n
router,
template: '<App/>',
components: { App }
})
```
## 使用
使用 `$t('路径')`
``` vue
<PageHeader
slot="header"
:title="`${$t('pub.pageHeader.demo')} 1`"
url="http://kazupon.github.io/vue-i18n/en/">
</PageHeader>
```
## 局部配置
有时候我们只希望在某个文件中配置这个组件的多国语言,如果所有的语言设置都放在 `d2-admin/src/i18n` 中会造成混乱,不易维护
`D2Admin` 已经替你安装好了 `vue-i18n-loader`,可以方便地在单文件组件中使用
示例
``` vue
<i18n src="./lang.json"></i18n>
<template>
<div>
<el-tag>{{$t('hello')}}</el-tag>
<p>{{$t('check.title')}}</p>
<el-checkbox-group v-model="check">
<el-checkbox label="a">{{$t('check.label.Beijing')}}</el-checkbox>
<el-checkbox label="b">{{$t('check.label.Tokyo')}}</el-checkbox>
<el-checkbox label="c">{{$t('check.label.NewYork')}}</el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
export default {
data () {
return {
check: ['a', 'b']
}
}
}
</script>
```
在同一文件夹下的 `lang.json`
``` json
{
"cn": {
"hello": "你好",
"check": {
"title": "请选择",
"label": {
"Beijing": "北京",
"Tokyo": "东京",
"NewYork": "纽约"
}
}
},
"en": {
"hello": "hello",
"check": {
"title": "Please choose",
"label": {
"Beijing": "Beijing",
"Tokyo": "Tokyo",
"NewYork": "NewYork"
}
}
},
"ja": {
"hello": "こんにちは",
"check": {
"title": "選択してください",
"label": {
"Beijing": "北京",
"Tokyo": "東京",
"NewYork": "ニューヨーク"
}
}
}
}
```
详细教程请查看官方文档,见此页右上角的链接