diff --git a/components/_util/ContainerRender.jsx b/components/_util/ContainerRender.jsx index 342c47098..cef0a7c27 100644 --- a/components/_util/ContainerRender.jsx +++ b/components/_util/ContainerRender.jsx @@ -42,7 +42,7 @@ export default { renderComponent(props = {}, ready) { const { visible, forceRender, getContainer, parent } = this; const self = this; - if (visible || parent.$refs._component || forceRender) { + if (visible || parent._component || parent.$refs._component || forceRender) { let el = this.componentEl; if (!this.container) { this.container = getContainer(); @@ -50,12 +50,14 @@ export default { this.componentEl = el; this.container.appendChild(el); } + // self.getComponent 不要放在 render 中,会因为响应式数据问题导致,多次触发 render + const com = { component: self.getComponent(props) }; if (!this._component) { this._component = new this.$root.constructor({ el, parent: self, data: { - comProps: props, + _com: com, }, mounted() { this.$nextTick(() => { @@ -72,17 +74,16 @@ export default { }); }, methods: { - forceRender(p) { - this.comProps = p; - this.$forceUpdate(); + setComponent(_com) { + this.$data._com = _com; }, }, render() { - return self.getComponent(this.comProps); + return this.$data._com.component; }, }); } else { - this._component.forceRender(props); + this._component.setComponent(com); } } }, diff --git a/components/vc-select/DropdownMenu.jsx b/components/vc-select/DropdownMenu.jsx index ee68e56df..67b3f6bb3 100644 --- a/components/vc-select/DropdownMenu.jsx +++ b/components/vc-select/DropdownMenu.jsx @@ -32,6 +32,10 @@ export default { visible(val) { if (!val) { this.lastVisible = val; + } else { + this.$nextTick(() => { + this.scrollActiveItemToView(); + }); } }, }, @@ -50,11 +54,11 @@ export default { }, updated() { const props = this.$props; - if (!this.prevVisible && props.visible) { - this.$nextTick(() => { - this.scrollActiveItemToView(); - }); - } + // if (!this.prevVisible && props.visible) { + // this.$nextTick(() => { + // this.scrollActiveItemToView(); + // }); + // } this.lastVisible = props.visible; this.lastInputValue = props.inputValue; this.prevVisible = this.visible; diff --git a/components/vc-tree-select/src/Select.jsx b/components/vc-tree-select/src/Select.jsx index 767927943..69678c7d9 100644 --- a/components/vc-tree-select/src/Select.jsx +++ b/components/vc-tree-select/src/Select.jsx @@ -828,11 +828,10 @@ const Select = { // When set open success and single mode, // we will reset the input content. if (open && !multiple && !treeCheckable && _searchValue) { - // 动画会有闪动,该特性先注释 - // this.setUncontrolledState({ - // _searchValue: '', - // _filteredTreeNodes: null, - // }); + this.setUncontrolledState({ + _searchValue: '', + _filteredTreeNodes: null, + }); } this.setOpenState(open, true); }, diff --git a/components/vc-trigger/Popup.jsx b/components/vc-trigger/Popup.jsx index 22fb31823..d315b48d7 100644 --- a/components/vc-trigger/Popup.jsx +++ b/components/vc-trigger/Popup.jsx @@ -46,12 +46,14 @@ export default { this.setStretchSize(); }); }, - beforeUpdate() { - if (this.domEl && this.domEl.rcEndListener) { - this.domEl.rcEndListener(); - this.domEl = null; - } - }, + // 如添加会导致动画失效,如放开会导致快速输入时闪动 https://github.com/vueComponent/ant-design-vue/issues/1327, + // 目前方案是保留动画,闪动问题(动画多次执行)进一步定位 + // beforeUpdate() { + // if (this.domEl && this.domEl.rcEndListener) { + // this.domEl.rcEndListener(); + // this.domEl = null; + // } + // }, updated() { this.$nextTick(() => { this.setStretchSize(); @@ -207,10 +209,10 @@ export default { style: { ...sizeStyle, ...popupStyle, ...this.getZIndexStyle() }, }; let transitionProps = { - props: Object.assign({ + props: { appear: true, css: false, - }), + }, }; const transitionName = getTransitionName(); let useTransition = !!transitionName; @@ -227,6 +229,8 @@ export default { this.domEl = el; animate(el, `${transitionName}-enter`, done); }); + } else { + done(); } }); }, diff --git a/components/vc-trigger/Trigger.jsx b/components/vc-trigger/Trigger.jsx index 08b59a9ef..ed462eb7f 100644 --- a/components/vc-trigger/Trigger.jsx +++ b/components/vc-trigger/Trigger.jsx @@ -128,9 +128,10 @@ export default { if (this.sPopupVisible !== this.prevPopupVisible) { this.afterPopupVisibleChange(this.sPopupVisible); } + this.prevPopupVisible = this.sPopupVisible; }; + this.renderComponent(null, triggerAfterPopupVisibleChange); this.$nextTick(() => { - this.renderComponent(null, triggerAfterPopupVisibleChange); this.updatedCal(); }); },