Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n: update doc about vue-i18n@6.x #4471

Merged
merged 2 commits into from
Apr 28, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 39 additions & 3 deletions examples/docs/en-US/i18n.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@ webpack.config.js
}
```

## Compatible with `vue-i18n`
## Compatible with `vue-i18n@5.x`

Element is compatible with [vue-i18n](https://github.com/kazupon/vue-i18n), which makes multilingual switching even easier.
Element is compatible with [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), which makes multilingual switching even easier.

```javascript
import Vue from 'vue'
Expand All @@ -56,7 +56,7 @@ Vue.locale('zh-cn', zhLocale)
Vue.locale('en', enLocale)
```

## Compatibility with other i18n plugins
## Compatible with other i18n plugins
Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n.

```javascript
Expand All @@ -72,6 +72,42 @@ Vue.use(Element, {
})
```

## Compatible with `vue-i18n@6.x`

You need to manually handle it for compatibility with `6.x`.

```javascript
import Vue from 'vue'
import Element from 'element-ui'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/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 => i18n.vm._t(key)
})

new Vue({ i18n }).$mount('#app')
```

## Import via CDN

```html
Expand Down
42 changes: 39 additions & 3 deletions examples/docs/zh-CN/i18n.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,9 @@ Vue.component(Select.name, Select)
}
```

## 兼容 `vue-i18n`
## 兼容 `vue-i18n@5.x`

Element 兼容 [vue-i18n](https://github.com/kazupon/vue-i18n),搭配使用能更方便地实现多语言切换。
Element 兼容 [vue-i18n@5.x](https://github.com/kazupon/vue-i18n),搭配使用能更方便地实现多语言切换。

```javascript
import Vue from 'vue'
Expand All @@ -69,7 +69,7 @@ Vue.locale('en', enLocale)
```

## 兼容其他 i18n 插件
如果不使用 `vue-i18n`,而是用其他的 i18n 插件,Element 将无法兼容,但是可以自定义 Element 的 i18n 的处理方法。
如果不使用 `vue-i18n@5.x`,而是用其他的 i18n 插件,Element 将无法兼容,但是可以自定义 Element 的 i18n 的处理方法。

```javascript
import Vue from 'vue'
Expand All @@ -84,6 +84,42 @@ Vue.use(Element, {
})
```

## 兼容 `vue-i18n@6.x`

默认不支持 6.x 的 `vue-i18n`,你需要手动处理。

```javascript
import Vue from 'vue'
import Element from 'element-ui'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n)

const messages = {
en: {
message: 'hello',
...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)
},
zh: {
message: '你好',
...zhLocale // 或者用 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 => i18n.vm._t(key)
})

new Vue({ i18n }).$mount('#app')
```

## 通过 CDN 的方式加载语言文件

```html
Expand Down
2 changes: 1 addition & 1 deletion src/locale/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ let lang = defaultLang;
let merged = false;
let i18nHandler = function() {
const vuei18n = Object.getPrototypeOf(this || Vue).$t;
if (typeof vuei18n === 'function') {
if (typeof vuei18n === 'function' && !!Vue.locale) {
if (!merged) {
merged = true;
Vue.locale(
Expand Down