From 75bf88dbe418c24edf78f9202a97b9d50d1e6ed6 Mon Sep 17 00:00:00 2001 From: tjz <415800467@qq.com> Date: Thu, 8 Feb 2018 21:58:43 +0800 Subject: [PATCH] fix --- components/trigger/Popup.vue | 5 ++- components/trigger/index.vue | 4 +- components/vc-select/Select.vue | 65 ++++++++++++++++++--------------- 3 files changed, 40 insertions(+), 34 deletions(-) diff --git a/components/trigger/Popup.vue b/components/trigger/Popup.vue index 1d9961a46..e50d39a7f 100644 --- a/components/trigger/Popup.vue +++ b/components/trigger/Popup.vue @@ -22,6 +22,7 @@ export default { mask: PropTypes.bool, zIndex: PropTypes.number, popupClassName: PropTypes.any, + popupStyle: PropTypes.object.def({}), }, data () { return { @@ -99,7 +100,7 @@ export default { }, getPopupElement () { const { $props: props, $slots, $listeners, getTransitionName } = this - const { align, visible, prefixCls, animation } = props + const { align, visible, prefixCls, animation, popupStyle } = props const { mouseenter, mouseleave } = $listeners const className = this.getClassName(props.getClassNameFromAlign(align)) // const hiddenClassName = `${prefixCls}-hidden` @@ -115,7 +116,7 @@ export default { mouseleave: mouseleave || noop, }, ref: 'popupInstance', - style: { ...this.getZIndexStyle() }, + style: { ...this.getZIndexStyle(), ...popupStyle }, } const transitionProps = { props: Object.assign({ diff --git a/components/trigger/index.vue b/components/trigger/index.vue index 691d5c127..ae12fd8ea 100644 --- a/components/trigger/index.vue +++ b/components/trigger/index.vue @@ -340,12 +340,12 @@ export default { }, el: div, render () { - const { popupStyle, popupEvents, ...otherProps } = this.popupProps + const { popupEvents, ...otherProps } = this.popupProps const p = { props: otherProps, on: popupEvents, ref: 'popup', - style: popupStyle, + // style: popupStyle, } return ( { @@ -147,8 +148,8 @@ export default { }) }, beforeUpdate () { - console.log('beforeUpdate') - this.adjustOpenState() + // console.log('beforeUpdate') + // this.adjustOpenState() }, beforeDestroy () { this.clearFocusTime() @@ -200,12 +201,12 @@ export default { // combobox ignore onKeyDown (event) { - const { disabled, sOpen } = this + const { disabled, openStatus } = this if (disabled) { return } const keyCode = event.keyCode - if (sOpen && !this.getInputDOMNode()) { + if (openStatus && !this.getInputDOMNode()) { this.onInputKeydown(event) } else if (keyCode === KeyCode.ENTER || keyCode === KeyCode.DOWN) { this.setOpenState(true) @@ -214,7 +215,7 @@ export default { }, onInputKeydown (event) { - const { disabled, sOpen, sValue, $props } = this + const { disabled, openStatus, sValue, $props } = this if (disabled) { return } @@ -231,14 +232,14 @@ export default { return } if (keyCode === KeyCode.DOWN) { - if (!sOpen) { + if (!openStatus) { this.openIfHasChildren() event.preventDefault() event.stopPropagation() return } } else if (keyCode === KeyCode.ESC) { - if (sOpen) { + if (openStatus) { this.setOpenState(false) event.preventDefault() event.stopPropagation() @@ -246,7 +247,7 @@ export default { return } - if (sOpen) { + if (openStatus) { const menu = this.$refs.selectTriggerRef.getInnerMenu() if (menu && menu.onKeyDown(event, this.handleBackfill)) { event.preventDefault() @@ -322,7 +323,7 @@ export default { onArrowClick (e) { // e.stopPropagation() // if (!this.disabled) { - // this.setOpenState(!this.sOpen, !this.sOpen) + // this.setOpenState(!this.openStatus, !this.openStatus) // } }, @@ -544,10 +545,13 @@ export default { }, inputBlur (e) { // console.log(e.target) - this.onOuterBlur() - if (!this.disabled) { - this.setOpenState(!this.sOpen, !this.sOpen) - } + this.clearBlurTime() + this.blurTimer = setTimeout(() => { + this.onOuterBlur() + if (!this.disabled) { + this.setOpenState(!this.openStatus, !this.openStatus) + } + }, 10) }, _getInputElement () { const props = this.$props @@ -619,8 +623,8 @@ export default { }, setOpenState (open, needFocus) { - const { $props: props, $data: state } = this - if (state.sOpen === open) { + const { $props: props, openStatus } = this + if (openStatus === open) { this.maybeFocus(open, needFocus) return } @@ -919,7 +923,7 @@ export default { const { $props, showSearch } = this let options = [] // If hidden menu due to no options, then it should be calculated again - if (sOpen || this.hiddenForNoOptions) { + if (true || sOpen || this.hiddenForNoOptions) { options = this.renderFilterOptions() } this._options = options @@ -935,8 +939,9 @@ export default { this.hiddenForNoOptions = false } } + this.openStatus = sOpen return { - option: this._options, + options, open: sOpen, } }, @@ -1095,8 +1100,8 @@ export default { return sel }, - renderTopControlNode () { - const { sValue, sOpen, inputValue, $props: props } = this + renderTopControlNode (openStatus) { + const { sValue, inputValue, $props: props } = this const { choiceTransitionName, prefixCls, @@ -1116,7 +1121,7 @@ export default { if (!showSearch) { showSelectedValue = true } else { - if (sOpen) { + if (openStatus) { showSelectedValue = !inputValue if (showSelectedValue) { opacity = 0.4 @@ -1149,7 +1154,7 @@ export default { class={`${prefixCls}-search ${prefixCls}-search--inline`} key='input' style={{ - display: sOpen ? 'block' : 'none', + display: openStatus ? 'block' : 'none', }} > {this._getInputElement()} @@ -1230,7 +1235,7 @@ export default { if (isMultipleOrTags(props) && choiceTransitionName) { const transitionProps = getTransitionProps(choiceTransitionName, { tag: 'ul', - afterLeave: this.onChoiceAnimationLeave, + // beforeEnter: this.onChoiceAnimationLeave, }) innerNode = (