فهرست منبع

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

* i18n: update doc about vue-i18n@6.x

* i18n: fix typo
cinwell.li 8 سال پیش
والد
کامیت
2cc0fe6343
3فایلهای تغییر یافته به همراه79 افزوده شده و 7 حذف شده
  1. 39 3
      examples/docs/en-US/i18n.md
  2. 39 3
      examples/docs/zh-CN/i18n.md
  3. 1 1
      src/locale/index.js

+ 39 - 3
examples/docs/en-US/i18n.md

@@ -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'
@@ -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
@@ -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

+ 39 - 3
examples/docs/zh-CN/i18n.md

@@ -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'
@@ -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'
@@ -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

+ 1 - 1
src/locale/index.js

@@ -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(