diff --git a/examples/routers/select.vue b/examples/routers/select.vue index 0bb9ab6..55fdd4a 100644 --- a/examples/routers/select.vue +++ b/examples/routers/select.vue @@ -1,8 +1,9 @@ @@ -10,26 +11,85 @@ export default { data () { return { - model: 1, + model: '', options: [ + ], + list: [], + loading: false, + states: ["Alabama", "Alaska", "Arizona", + "Arkansas", "California", "Colorado", + "Connecticut", "Delaware", "Florida", + "Georgia", "Hawaii", "Idaho", "Illinois", + "Indiana", "Iowa", "Kansas", "Kentucky", + "Louisiana", "Maine", "Maryland", + "Massachusetts", "Michigan", "Minnesota", + "Mississippi", "Missouri", "Montana", + "Nebraska", "Nevada", "New Hampshire", + "New Jersey", "New Mexico", "New York", + "North Carolina", "North Dakota", "Ohio", + "Oklahoma", "Oregon", "Pennsylvania", + "Rhode Island", "South Carolina", + "South Dakota", "Tennessee", "Texas", + "Utah", "Vermont", "Virginia", + "Washington", "West Virginia", "Wisconsin", + "Wyoming"] + } + }, + mounted () { + this.options = [ +// { +// label: '全部', +// value: 0 +// },{ +// label: '苹果', +// value: 1 +// },{ +// label: '香蕉', +// value: 2 +// },{ +// label: '西瓜', +// value: 3 +// } + ]; + }, + methods: { + handleAdd () { + this.options = [ + { + label: '全部', + value: 0 + },{ + label: '苹果', + value: 1 + },{ + label: '香蕉', + value: 2 + },{ + label: '西瓜', + value: 3 + } ] + }, + remoteMethod (query) { + if (query !== '') { + this.loading = true; + setTimeout(() => { + this.loading = false; + this.options = this.list.filter(item => { + return item.label.toLowerCase() + .indexOf(query.toLowerCase()) > -1; + }); + }, 200); + } else { + this.options = []; + } } }, mounted () { - this.options = [{ - label: '全部', - value: 0 - },{ - label: '苹果', - value: 1 - },{ - label: '香蕉', - value: 2 - },{ - label: '西瓜', - value: 3 - }]; + this.list = this.states.map(item => { + return { value: item, label: item }; + }); } } \ No newline at end of file diff --git a/src/components/select/select.vue b/src/components/select/select.vue index 8fac874..6150170 100644 --- a/src/components/select/select.vue +++ b/src/components/select/select.vue @@ -22,12 +22,16 @@ @keydown.delete="handleInputDelete" ref="input"> - + - - - + + +
  • {{ localeNotFoundText }}
+
+
    {{ localeLoadingText }}
 @@ -74,6 +78,20 @@ filterMethod: { type: Function }, + remote: { + type: Boolean, + default: false + }, + remoteMethod: { + type: Function + }, + loading: { + type: Boolean, + default: false + }, + loadingText: { + type: String + }, size: { validator (value) { return oneOf(value, ['small', 'large', 'default']); @@ -103,6 +121,7 @@ selectedMultiple: [], focusIndex: 0, query: '', + selectToChangeQuery: false, // when select an option, set this first and set query, because query is watching, it will emit event inputLength: 20, notFound: false, slotChangeDuration: false, // if slot change duration and in multiple, set true and after slot change, set false @@ -168,6 +187,13 @@ return this.notFoundText; } }, + localeLoadingText () { + if (this.loadingText === undefined) { + return this.t('i.select.loading'); + } else { + return this.loadingText; + } + }, transitionName () { return this.placement === 'bottom' ? 'slide-up' : 'slide-down'; } @@ -187,15 +213,18 @@ }, // find option component findChild (cb) { + const _this = this; const find = function (child) { const name = child.$options.componentName; if (name) { cb(child); } else if (child.$children.length) { - child.$children.forEach((innerChild) => { - find(innerChild, cb); - }); + _this.$nextTick(() => { + child.$children.forEach((innerChild) => { + find(innerChild, cb); + }); + }) } }; @@ -228,8 +257,10 @@ this.options = options; if (init) { - this.updateSingleSelected(true, slot); - this.updateMultipleSelected(true, slot); + if (!this.remote) { + this.updateSingleSelected(true, slot); + this.updateMultipleSelected(true, slot); + } } }, updateSingleSelected (init = false, slot = false) { @@ -535,18 +566,22 @@ document.addEventListener('keydown', this.handleKeydown); this.$on('append', () => { - this.modelToQuery(); - this.$nextTick(() => { - this.broadcastQuery(''); - }); + if (!this.remote) { + this.modelToQuery(); + this.$nextTick(() => { + this.broadcastQuery(''); + }); + } this.slotChange(); this.updateOptions(true, true); }); this.$on('remove', () => { - this.modelToQuery(); - this.$nextTick(() => { - this.broadcastQuery(''); - }); + if (!this.remote) { + this.modelToQuery(); + this.$nextTick(() => { + this.broadcastQuery(''); + }); + } this.slotChange(); this.updateOptions(true, true); }); @@ -565,6 +600,7 @@ } if (this.filterable) { + this.selectToChangeQuery = true; this.query = ''; this.$refs.input.focus(); } @@ -574,6 +610,7 @@ if (this.filterable) { this.findChild((child) => { if (child.value === value) { + this.selectToChangeQuery = true; this.query = child.label === undefined ? child.searchLabel : child.label; } }); @@ -625,20 +662,29 @@ } }, query (val) { - this.$emit('on-query-change', val); + if (this.remote && this.remoteMethod) { + if (!this.selectToChangeQuery) { + this.$emit('on-query-change', val); + this.remoteMethod(val); + } + } else { + if (!this.selectToChangeQuery) { + this.$emit('on-query-change', val); + } + this.broadcastQuery(val); - this.broadcastQuery(val); - - let is_hidden = true; + let is_hidden = true; - this.$nextTick(() => { - this.findChild((child) => { - if (!child.hidden) { - is_hidden = false; - } + this.$nextTick(() => { + this.findChild((child) => { + if (!child.hidden) { + is_hidden = false; + } + }); + this.notFound = is_hidden; }); - this.notFound = is_hidden; - }); + } + this.selectToChangeQuery = false; this.broadcast('Drop', 'on-update-popper'); } } diff --git a/src/locale/lang/en-US.js b/src/locale/lang/en-US.js index ade42eb..9de431f 100644 --- a/src/locale/lang/en-US.js +++ b/src/locale/lang/en-US.js @@ -2,7 +2,8 @@ export default { i: { select: { placeholder: 'Select', - noMatch: 'No matching data' + noMatch: 'No matching data', + loading: 'Loading' }, table: { noDataText: 'No Data', diff --git a/src/locale/lang/es-ES.js b/src/locale/lang/es-ES.js index b951e64..4c4d813 100644 --- a/src/locale/lang/es-ES.js +++ b/src/locale/lang/es-ES.js @@ -2,7 +2,8 @@ export default { i: { select: { placeholder: 'Seleccionar', - noMatch: 'Sin coincidencias' + noMatch: 'Sin coincidencias', + loading: 'Cargando' }, table: { noDataText: 'Sin Datos', diff --git a/src/locale/lang/ja-JP.js b/src/locale/lang/ja-JP.js index 4d49f42..bcad149 100644 --- a/src/locale/lang/ja-JP.js +++ b/src/locale/lang/ja-JP.js @@ -2,7 +2,8 @@ export default { i: { select: { placeholder: '選んでください', - noMatch: 'マッチするデータなし' + noMatch: 'マッチするデータなし', + loading: 'ロード中' }, table: { noDataText: 'データなし', diff --git a/src/locale/lang/tr-TR.js b/src/locale/lang/tr-TR.js index 4b76269..ed95c98 100644 --- a/src/locale/lang/tr-TR.js +++ b/src/locale/lang/tr-TR.js @@ -2,7 +2,8 @@ export default { i: { select: { placeholder: 'Seç', - noMatch: 'Eşleşen veri yok' + noMatch: 'Eşleşen veri yok', + loading: 'yükleme' }, table: { noDataText: 'Veri Yok', diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js index 4e1c914..ea87ebc 100644 --- a/src/locale/lang/zh-CN.js +++ b/src/locale/lang/zh-CN.js @@ -2,7 +2,8 @@ export default { i: { select: { placeholder: '请选择', - noMatch: '无匹配数据' + noMatch: '无匹配数据', + loading: '加载中' }, table: { noDataText: '暂无数据', diff --git a/src/locale/lang/zh-TW.js b/src/locale/lang/zh-TW.js index aa6fe1d..b9e45cc 100644 --- a/src/locale/lang/zh-TW.js +++ b/src/locale/lang/zh-TW.js @@ -2,7 +2,8 @@ export default { i: { select: { placeholder: '請選擇', - noMatch: '無匹配數據' + noMatch: '無匹配數據', + loading: '加載中' }, table: { noDataText: '暫無數據', diff --git a/src/styles/components/select.less b/src/styles/components/select.less index 550d419..2227c96 100644 --- a/src/styles/components/select.less +++ b/src/styles/components/select.less @@ -174,6 +174,10 @@ text-align: center; color: @btn-disable-color; } + &-loading{ + text-align: center; + color: @btn-disable-color; + } &-multiple .@{css-prefix}tag{ margin: 3px 4px 2px 0; -- libgit2 0.21.4