diff --git a/src/components/select/select.vue b/src/components/select/select.vue index d9a715e..2a15988 100644 --- a/src/components/select/select.vue +++ b/src/components/select/select.vue @@ -26,7 +26,7 @@ - + @@ -34,7 +34,7 @@ import Icon from '../icon'; import Dropdown from './dropdown.vue'; import clickoutside from '../../directives/clickoutside'; - import { oneOf } from '../../utils/assist'; + import { oneOf, MutationObserver } from '../../utils/assist'; const prefixCls = 'ivu-select'; @@ -94,7 +94,8 @@ focusIndex: 0, query: '', inputLength: 20, - notFound: false + notFound: false, + slotChangeDuration: false // if slot change duration and in multiple, set true and after slot change, set false } }, computed: { @@ -180,7 +181,7 @@ }); } }, - updateOptions (init) { + updateOptions (init, slot = false) { let options = []; let index = 1; @@ -199,20 +200,28 @@ this.options = options; if (init) { - this.updateSingleSelected(true); - this.updateMultipleSelected(true); + this.updateSingleSelected(true, slot); + this.updateMultipleSelected(true, slot); } }, - updateSingleSelected (init = false) { + updateSingleSelected (init = false, slot = false) { const type = typeof this.model; if (type === 'string' || type === 'number') { + let findModel = false; + for (let i = 0; i < this.options.length; i++) { if (this.model === this.options[i].value) { this.selectedSingle = this.options[i].label; + findModel = true; break; } } + + if (slot && !findModel) { + this.model = ''; + this.query = ''; + } } this.toggleSingleSelected(this.model, init); @@ -229,7 +238,7 @@ } } }, - updateMultipleSelected (init = false) { + updateMultipleSelected (init = false, slot = false) { if (this.multiple && Array.isArray(this.model)) { let selected = []; @@ -249,8 +258,22 @@ } this.selectedMultiple = selected; - } + if (slot) { + let selectedModel = []; + + for (let i = 0; i < selected.length; i++) { + selectedModel.push(selected[i].value); + } + + // if slot change and remove a selected option, emit user + if (this.model.length === selectedModel.length) { + this.slotChangeDuration = true; + } + + this.model = selectedModel; + } + } this.toggleMultipleSelected(this.model, init); }, removeTag (index) { @@ -431,19 +454,46 @@ if (this.multiple && this.model.length && this.query === '') { this.removeTag(this.model.length - 1); } + }, + // use when slot changed + slotChange () { + this.options = []; + this.optionInstances = []; } }, ready () { this.updateOptions(true); document.addEventListener('keydown', this.handleKeydown); + + // watch slot changed + if (MutationObserver) { + this.observer = new MutationObserver(() => { + this.slotChange(); + this.updateOptions(true, true); + }); + + this.observer.observe(this.$els.options, { +// attributes: true, + childList: true, + characterData: true, + subtree: true + }); + } }, beforeDestroy () { document.removeEventListener('keydown', this.handleKeydown); + if (this.observer) { + this.observer.disconnect(); + } }, watch: { model () { if (this.multiple) { - this.updateMultipleSelected(); + if (this.slotChangeDuration) { + this.slotChangeDuration = false; + } else { + this.updateMultipleSelected(); + } } else { this.updateSingleSelected(); } diff --git a/src/styles/themes/default/custom.less b/src/styles/themes/default/custom.less index f9a4158..abecb27 100644 --- a/src/styles/themes/default/custom.less +++ b/src/styles/themes/default/custom.less @@ -46,7 +46,7 @@ @shadow-right : 1px 0 6px @shadow-color; // Button -@btn-font-weight : 400; +@btn-font-weight : normal; @btn-padding-base : 4px 15px; @btn-padding-large : 6px 15px 7px 15px; @btn-padding-small : 2px 7px; diff --git a/src/utils/assist.js b/src/utils/assist.js index 5467100..92caa73 100644 --- a/src/utils/assist.js +++ b/src/utils/assist.js @@ -49,4 +49,7 @@ export function getScrollBarSize (fresh) { cached = widthContained - widthScroll; } return cached; -} \ No newline at end of file +} + +// watch DOM change +export const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver || false; \ No newline at end of file diff --git a/test/routers/select.vue b/test/routers/select.vue index 7bc07ed..8ea48ed 100644 --- a/test/routers/select.vue +++ b/test/routers/select.vue @@ -1,98 +1,67 @@ \ No newline at end of file + diff --git a/test/routers/tag.vue b/test/routers/tag.vue index b7471d0..778d5bc 100644 --- a/test/routers/tag.vue +++ b/test/routers/tag.vue @@ -28,10 +28,23 @@ 标签一 标签一 标签一 + 显示对话框 + +

对话框内容

+

对话框内容

+

对话框内容

+
-- libgit2 0.21.4