From 69166f5fb546aaf2fb3d5eb8321c3a1db06ae4d1 Mon Sep 17 00:00:00 2001 From: tjz <415800467@qq.com> Date: Thu, 22 Feb 2018 22:09:03 +0800 Subject: [PATCH] fix --- components/vc-select/Select.vue | 162 +++++++++++--------------------- examples/routes.js | 2 +- package-lock.json | 20 ++++ 3 files changed, 78 insertions(+), 106 deletions(-) diff --git a/components/vc-select/Select.vue b/components/vc-select/Select.vue index ab5119fb6..6bbb579ec 100644 --- a/components/vc-select/Select.vue +++ b/components/vc-select/Select.vue @@ -99,7 +99,7 @@ export default { let inputValue = '' if (combobox) { inputValue = sValue.length - ? this.getLabelFromProps(sValue[0].key) + ? this.labelMap.get((sValue[0].key)) : '' } let sOpen = open @@ -116,9 +116,7 @@ export default { sOpen, } }, - beforeMount () { - // this.adjustOpenState() - }, + mounted () { this.$nextTick(() => { this.autoFocus && this.focus() @@ -141,14 +139,16 @@ export default { this.sValue = sValue if (this.combobox) { this.setState({ - inputValue: sValue.length - ? this.getLabelFromProps(sValue[0].key) - : '', + inputValue: sValue.length ? this.labelMap.get((sValue[0].key)) : '', }) } }, - combobox () { - this.updateState() + combobox (val) { + if (val) { + this.setState({ + inputValue: this.sValue.length ? this.labelMap.get((this.sValue[0].key)) : '', + }) + } }, }, updated () { @@ -189,22 +189,6 @@ export default { } }) }, - updateState () { - const { combobox, $slots } = this - let value = toArray(this.value) - value = this.addLabelToValue(value) - value = this.addTitleToValue($slots.default, value) - this.setState({ - sValue: value, - }) - if (combobox) { - this.setState({ - inputValue: value.length - ? this.getLabelFromProps(value[0].key) - : '', - }) - } - }, onInputChange (event) { const { tokenSeparators } = this const val = event.target.value @@ -459,20 +443,6 @@ export default { } else { event.stopPropagation() } - // const { inputValue, sValue, disabled } = this - // if (disabled) { - // return - // } - // event.stopPropagation() - // if (inputValue || sValue.length) { - // if (sValue.length) { - // this.fireChange([]) - // } - // this.setOpenState(false, true) - // if (inputValue) { - // this.setInputValue('') - // } - // } }, onChoiceAnimationLeave () { @@ -588,7 +558,7 @@ export default { if (!this.labelInValue) { vls = vls.map(v => v.key) } else { - vls = vls.map(vl => ({ key: vl.key, label: this.labelMap.get('label') })) + vls = vls.map(vl => ({ key: vl.key, label: this.labelMap.get(vl.key) })) } return isMultipleOrTags(this.$props) ? vls : vls[0] } @@ -926,42 +896,42 @@ export default { } }, - addLabelToValue (value_) { - let value = value_ - if (this.labelInValue) { - value.forEach(v => { - v.label = v.label || this.getLabelFromProps(v.key) - }) - } else { - value = value.map(v => { - return { - key: v, - label: this.getLabelFromProps(v), - } - }) - } - return value - }, - - addTitleToValue (children = [], values) { - let nextValues = values - const keys = values.map(v => v.key) - children.forEach(child => { - if (!child) { - return - } - if (getSlotOptions(child).isSelectOptGroup) { - nextValues = this.addTitleToValue(child.componentOptions.children, nextValues) - } else { - const value = getValuePropValue(child) - const valueIndex = keys.indexOf(value) - if (valueIndex > -1) { - nextValues[valueIndex].title = getValue(child, 'title') - } - } - }) - return nextValues - }, + // addLabelToValue (value_) { + // let value = value_ + // if (this.labelInValue) { + // value.forEach(v => { + // v.label = v.label || this.getLabelFromProps(v.key) + // }) + // } else { + // value = value.map(v => { + // return { + // key: v, + // label: this.getLabelFromProps(v), + // } + // }) + // } + // return value + // }, + + // addTitleToValue (children = [], values) { + // let nextValues = values + // const keys = values.map(v => v.key) + // children.forEach(child => { + // if (!child) { + // return + // } + // if (getSlotOptions(child).isSelectOptGroup) { + // nextValues = this.addTitleToValue(child.componentOptions.children, nextValues) + // } else { + // const value = getValuePropValue(child) + // const valueIndex = keys.indexOf(value) + // if (valueIndex > -1) { + // nextValues[valueIndex].title = getValue(child, 'title') + // } + // } + // }) + // return nextValues + // }, removeSelected (selectedKey) { const props = this.$props @@ -1043,32 +1013,6 @@ export default { return nextValue }, - adjustOpenState () { - if (this.skipAdjustOpen) { - return - } - const { $props, showSearch } = this - let sOpen = this.sOpen - let options = [] - // If hidden menu due to no options, then it should be calculated again - if (sOpen || this.hiddenForNoOptions) { - options = this.renderFilterOptions() - } - this._options = options - - if (isMultipleOrTagsOrCombobox($props) || !showSearch) { - if (sOpen && !options.length) { - sOpen = false - this.hiddenForNoOptions = true - } - // Keep menu open if there are options and hidden for no options before - if (this.hiddenForNoOptions && options.length) { - sOpen = true - this.hiddenForNoOptions = false - } - } - this.sOpen = sOpen - }, getOptionsAndOpenStatus () { let sOpen = this.sOpen if (this.skipAdjustOpen) { @@ -1345,7 +1289,7 @@ export default { if (isMultipleOrTags(props)) { selectedValueNodes = limitedCountValue.map(singleValue => { let content = this.labelMap.get(singleValue.key) - const title = this.titleMap.get(singleValue.title) || content + const title = this.titleMap.get(singleValue.key) || content if ( maxTagTextLength && typeof content === 'string' && @@ -1487,8 +1431,16 @@ export default { }, render () { - this.labelMap = new Map() - this.titleMap = new Map() + // 保留已选中的label and title + const labelArr = [] + const titleArr = [] + this.sValue.forEach(({ key }) => { + labelArr.push([key, this.labelMap.get(key)]) + titleArr.push([key, this.titleMap.get(key)]) + }) + this.labelMap = new Map(labelArr) + this.titleMap = new Map(titleArr) + this.updateLabelAndTitleMap(this.$slots.default) const props = this.$props const multiple = isMultipleOrTags(props) diff --git a/examples/routes.js b/examples/routes.js index 5a51123a9..5e4a0d694 100644 --- a/examples/routes.js +++ b/examples/routes.js @@ -3,7 +3,7 @@ const AsyncComp = () => { const hashs = window.location.hash.split('/') const d = hashs[hashs.length - 1] return { - component: import(`../components/vc-select/demo/single.vue`), + component: import(`../components/vc-select/demo/${d}.vue`), } } export default [ diff --git a/package-lock.json b/package-lock.json index a09fa64d2..5c6120efe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6848,6 +6848,26 @@ "dev": true, "optional": true }, + "jsonp": { + "version": "0.2.1", + "resolved": "http://registry.npm.taobao.org/jsonp/download/jsonp-0.2.1.tgz", + "integrity": "sha1-pltPoPEL2nGaBUQep7lMVfPhW64=", + "dev": true, + "requires": { + "debug": "2.6.9" + }, + "dependencies": { + "debug": { + "version": "2.6.9", + "resolved": "http://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz", + "integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=", + "dev": true, + "requires": { + "ms": "2.0.0" + } + } + } + }, "jsprim": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",