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 (
<Popup
diff --git a/components/vc-select/Select.vue b/components/vc-select/Select.vue
index 662f761c4..0fe9c5dc4 100644
--- a/components/vc-select/Select.vue
+++ b/components/vc-select/Select.vue
@@ -31,6 +31,7 @@ import {
} from './util'
import SelectTrigger from './SelectTrigger'
import { SelectPropTypes } from './PropTypes'
+import { setTimeout } from 'timers'
function noop () {}
@@ -101,7 +102,7 @@ export default {
}
},
beforeMount () {
- this.adjustOpenState()
+ // this.adjustOpenState()
},
mounted () {
this.$nextTick(() => {
@@ -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 = (
<transition-group
@@ -1299,11 +1304,11 @@ export default {
render () {
const props = this.$props
const multiple = isMultipleOrTags(props)
- const { disabled, prefixCls, sOpen, inputValue, sValue, $listeners } = this
+ const { options, open: openStatus } = this.getOptionsAndOpenStatus()
+ const { disabled, prefixCls, inputValue, sValue, $listeners } = this
const { mouseenter = noop, mouseleave = noop, popupScroll = noop } = $listeners
- const ctrlNode = this.renderTopControlNode()
+ const ctrlNode = this.renderTopControlNode(openStatus)
let extraSelectionProps = {}
- const options = this._options
if (!isMultipleOrTagsOrCombobox(props)) {
extraSelectionProps = {
onKeyDown: this.onKeyDown,
@@ -1312,8 +1317,8 @@ export default {
}
const rootCls = {
[prefixCls]: 1,
- [`${prefixCls}-open`]: sOpen,
- [`${prefixCls}-focused`]: sOpen || !!this._focused,
+ [`${prefixCls}-open`]: openStatus,
+ [`${prefixCls}-focused`]: openStatus || !!this._focused,
[`${prefixCls}-combobox`]: isCombobox(props),
[`${prefixCls}-disabled`]: disabled,
[`${prefixCls}-enabled`]: !disabled,
@@ -1336,7 +1341,7 @@ export default {
options={options}
multiple={multiple}
disabled={disabled}
- visible={sOpen}
+ visible={openStatus}
inputValue={inputValue}
value={sValue}
firstActiveValue={props.firstActiveValue}
@@ -1366,7 +1371,7 @@ export default {
role='combobox'
aria-autocomplete='list'
aria-haspopup='true'
- aria-expanded={sOpen}
+ aria-expanded={openStatus}
{...extraSelectionProps}
// onClick={this.stopPropagation}
>