support i18n

support i18n

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: '無匹配數據'
+        }
+    }
+};