diff --git a/package.json b/package.json index fe3ffc5..d909780 100644 --- a/package.json +++ b/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": { diff --git a/src/components/select/select.vue b/src/components/select/select.vue index 7741b78..5d607bd 100644 --- a/src/components/select/select.vue +++ b/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 () { diff --git a/src/index.js b/src/index.js index e7a71fa..6756a5b 100644 --- a/src/index.js +++ b/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]); }); diff --git a/src/locale/format.js b/src/locale/format.js new file mode 100644 index 0000000..93e3c34 --- /dev/null +++ b/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; +} diff --git a/src/locale/index.js b/src/locale/index.js new file mode 100644 index 0000000..faf0cf7 --- /dev/null +++ b/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 }; \ No newline at end of file diff --git a/src/locale/lang/en-US.js b/src/locale/lang/en-US.js new file mode 100644 index 0000000..08f2215 --- /dev/null +++ b/src/locale/lang/en-US.js @@ -0,0 +1,8 @@ +export default { + i: { + select: { + placeholder: 'Select', + noMatch: 'No matching data' + } + } +}; \ No newline at end of file diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js new file mode 100644 index 0000000..25bfa00 --- /dev/null +++ b/src/locale/lang/zh-CN.js @@ -0,0 +1,8 @@ +export default { + i: { + select: { + placeholder: '请选择', + noMatch: '无匹配数据' + } + } +}; \ No newline at end of file diff --git a/src/locale/lang/zh-TW.js b/src/locale/lang/zh-TW.js new file mode 100644 index 0000000..afa0053 --- /dev/null +++ b/src/locale/lang/zh-TW.js @@ -0,0 +1,8 @@ +export default { + i: { + select: { + placeholder: '請選擇', + noMatch: '無匹配數據' + } + } +}; \ No newline at end of file diff --git a/test/main.js b/test/main.js index 1531880..b33cf28 100644 --- a/test/main.js +++ b/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; diff --git a/test/routers/select.vue b/test/routers/select.vue index 749005a..90b325d 100644 --- a/test/routers/select.vue +++ b/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: [] } } } -- libgit2 0.21.4