support i18n

support i18n

package.json

@@ -40,6 +40,7 @@
   "dependencies": {
     "async-validator": "^1.6.7",
     "core-js": "^2.4.1",
+    "deepmerge": "^1.3.1",
     "popper.js": "^0.6.4"
   },
   "peerDependencies": {

src/components/select/select.vue

@@ -35,6 +35,7 @@
     import Dropdown from './dropdown.vue';
     import clickoutside from '../../directives/clickoutside';
     import { oneOf, MutationObserver } from '../../utils/assist';
+    import { t } from '../../locale';
 
     const prefixCls = 'ivu-select';
 
@@ -60,7 +61,9 @@
             },
             placeholder: {
                 type: String,
-                default: '请选择'
+                default () {
+                    return t('i.select.placeholder');
+                }
             },
             filterable: {
                 type: Boolean,
@@ -80,7 +83,9 @@
             },
             notFoundText: {
                 type: String,
-                default: '无匹配数据'
+                default () {
+                    return t('i.select.noMatch');
+                }
             }
         },
         data () {

src/index.js

@@ -40,6 +40,7 @@ import Tooltip from './components/tooltip';
 import Transfer from './components/transfer';
 import { Row, Col } from './components/layout';
 import { Select, Option, OptionGroup } from './components/select';
+import locale from './locale';
 
 const iview = {
     Affix,
@@ -100,7 +101,10 @@ const iview = {
     Transfer
 };
 
-const install = function (Vue) {
+const install = function (Vue, opts = {}) {
+    locale.use(opts.locale);
+    locale.i18n(opts.i18n);
+
     Object.keys(iview).forEach((key) => {
         Vue.component(key, iview[key]);
     });

src/locale/format.js

@@ -0,0 +1,47 @@
+/**
+ *  String format template
+ *  - Inspired:
+ *    https://github.com/Matt-Esch/string-template/index.js
+ */
+
+const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g;
+
+export default function(Vue) {
+    const { hasOwn } = Vue.util;
+
+    /**
+     * template
+     *
+     * @param {String} string
+     * @param {Array} ...args
+     * @return {String}
+     */
+
+    function template(string, ...args) {
+        if (args.length === 1 && typeof args[0] === 'object') {
+            args = args[0];
+        }
+
+        if (!args || !args.hasOwnProperty) {
+            args = {};
+        }
+
+        return string.replace(RE_NARGS, (match, prefix, i, index) => {
+            let result;
+
+            if (string[index - 1] === '{' &&
+                string[index + match.length] === '}') {
+                return i;
+            } else {
+                result = hasOwn(args, i) ? args[i] : null;
+                if (result === null || result === undefined) {
+                    return '';
+                }
+
+                return result;
+            }
+        });
+    }
+
+    return template;
+}

src/locale/index.js

@@ -0,0 +1,50 @@
+// https://github.com/ElemeFE/element/blob/dev/src/locale/index.js
+
+import defaultLang from './lang/zh-CN';
+import Vue from 'vue';
+import deepmerge from 'deepmerge';
+import Format from './format';
+
+const format = Format(Vue);
+let lang = defaultLang;
+let merged = false;
+let i18nHandler = function() {
+    const vuei18n = Object.getPrototypeOf(this || Vue).$t;
+    if (typeof vuei18n === 'function') {
+        if (!merged) {
+            merged = true;
+            Vue.locale(
+                Vue.config.lang,
+                deepmerge(lang, Vue.locale(Vue.config.lang) || {}, { clone: true })
+            );
+        }
+        return vuei18n.apply(this, arguments);
+    }
+};
+
+export const t = function(path, options) {
+    let value = i18nHandler.apply(this, arguments);
+    if (value !== null && value !== undefined) return value;
+
+    const array = path.split('.');
+    let current = lang;
+
+    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;
+    }
+    return '';
+};
+
+export const use = function(l) {
+    lang = l || lang;
+};
+
+export const i18n = function(fn) {
+    i18nHandler = fn || i18nHandler;
+};
+
+export default { use, t, i18n };

src/locale/lang/en-US.js

@@ -0,0 +1,8 @@
+export default {
+    i: {
+        select: {
+            placeholder: 'Select',
+            noMatch: 'No matching data'
+        }
+    }
+};

src/locale/lang/zh-CN.js

@@ -0,0 +1,8 @@
+export default {
+    i: {
+        select: {
+            placeholder: '请选择',
+            noMatch: '无匹配数据'
+        }
+    }
+};

src/locale/lang/zh-TW.js

@@ -0,0 +1,8 @@
+export default {
+    i: {
+        select: {
+            placeholder: '請選擇',
+            noMatch: '無匹配數據'
+        }
+    }
+};

test/main.js

@@ -5,9 +5,10 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './app.vue';
 import iView from '../src/index';
+import locale from '../src/locale/lang/en-US';
 
 Vue.use(VueRouter);
-Vue.use(iView);
+Vue.use(iView, { locale });
 
 // 开启debug模式
 Vue.config.debug = true;

test/routers/select.vue

@@ -2,12 +2,12 @@
     <Row>
         <i-col span="12" style="padding-right:10px">
             <i-select :model.sync="model11" filterable>
-                <i-option v-for="item in cityList" :value="item.value" :label="item.label"><span>{{ item.label }}</span><span>{{ item.des }}</span></i-option>
+                <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
             </i-select>
         </i-col>
         <i-col span="12">
             <i-select :model.sync="model12" filterable multiple>
-                <i-option v-for="item in cityList" :value="item.value" :label="item.label"><span>{{ item.label }}</span><span>{{ item.des }}</span></i-option>
+                <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
             </i-select>
         </i-col>
     </Row>
@@ -19,27 +19,31 @@
                 cityList: [
                     {
                         value: 'beijing',
-                        label: '北京市',
-                        des: '帝都'
+                        label: '北京市'
                     },
                     {
                         value: 'shanghai',
-                        label: '上海市',
-                        des: '魔都'
+                        label: '上海市'
                     },
                     {
                         value: 'shenzhen',
-                        label: '深圳市',
-                        des: '渔村'
+                        label: '深圳市'
+                    },
+                    {
+                        value: 'hangzhou',
+                        label: '杭州市'
+                    },
+                    {
+                        value: 'nanjing',
+                        label: '南京市'
                     },
                     {
                         value: 'chongqing',
-                        label: '重庆市',
-                        des: '山城'
+                        label: '重庆市'
                     }
                 ],
                 model11: '',
-                model12: ['beijing', 'shanghai']
+                model12: []
             }
         }
     }