Merge pull request #2191 from QingWei-Li/custom-i18n

Locale: customize i18n handler, close #2129

build/bin/build-entry.js

@@ -16,6 +16,7 @@ const install = function(Vue, opts = {}) {
   /* istanbul ignore if */
   if (install.installed) return;
   locale.use(opts.locale);
+  locale.i18n(opts.i18n);
 
 {{install}}
 
@@ -38,6 +39,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 module.exports = {
   version: '{{version}}',
   locale: locale.use,
+  i18n: locale.i18n,
   install,
   Loading,
 {{list}}

examples/docs/en-US/i18n.md

@@ -56,6 +56,21 @@ Vue.locale('zh-cn', zhLocale)
 Vue.locale('en', enLocale)
 ```
 
+## Compatibility 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
+import Vue from 'vue'
+import Element from 'element-ui'
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+
+Vue.use(Element, {
+  i18n: function (path, options) {
+    // ...
+  }
+})
+```
 
 Currently Element ships with the following languages:
 <ul class="language-list">

examples/docs/zh-CN/i18n.md

@@ -68,6 +68,22 @@ Vue.locale('zh-cn', zhLocale)
 Vue.locale('en', enLocale)
 ```
 
+## 兼容其他 i18n 插件
+如果不使用 `vue-i18n`，而是用其他的 i18n 插件，Element 将无法兼容，但是可以自定义 Element 的 i18n 的处理方法。
+
+```javascript
+import Vue from 'vue'
+import Element from 'element-ui'
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+
+Vue.use(Element, {
+  i18n: function (path, options) {
+    // ...
+  }
+})
+```
+
 目前 Element 内置了以下语言：
 <ul class="language-list">
   <li>简体中文（zh-CN）</li>

src/index.js

@@ -66,6 +66,7 @@ const install = function(Vue, opts = {}) {
   /* istanbul ignore if */
   if (install.installed) return;
   locale.use(opts.locale);
+  locale.i18n(opts.i18n);
 
   Vue.component(Pagination.name, Pagination);
   Vue.component(Dialog.name, Dialog);
@@ -143,6 +144,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 module.exports = {
   version: '1.1.2',
   locale: locale.use,
+  i18n: locale.i18n,
   install,
   Loading,
   Pagination,

src/locale/index.js

@@ -6,8 +6,7 @@ import Format from './format';
 const format = Format(Vue);
 let lang = defaultLang;
 let merged = false;
-
-export const t = function(path, options) {
+let i18nHandler = function() {
   const vuei18n = Object.getPrototypeOf(this || Vue).$t;
   if (typeof vuei18n === 'function') {
     if (!merged) {
@@ -17,14 +16,20 @@ export const t = function(path, options) {
         deepmerge(lang, Vue.locale(Vue.config.lang) || {}, { clone: true })
       );
     }
-    return vuei18n.apply(this, [path, options]);
+    return vuei18n.apply(this, arguments);
   }
+};
+
+export const t = function(path, options) {
+  let value = i18nHandler.apply(this, arguments);
+  if (value) return value;
+
   const array = path.split('.');
   let current = lang;
 
-  for (var i = 0, j = array.length; i < j; i++) {
-    var property = array[i];
-    var value = current[property];
+  for (let i = 0, j = array.length; i < j; i++) {
+    const property = array[i];
+    value = current[property];
     if (i === j - 1) return format(value, options);
     if (!value) return '';
     current = value;
@@ -35,4 +40,9 @@ export const t = function(path, options) {
 export const use = function(l) {
   lang = l || lang;
 };
-export default { use, t };
+
+export const i18n = function(fn) {
+  i18nHandler = fn || i18nHandler;
+};
+
+export default { use, t, i18n };