github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Select: fix incorrect scrollTop on first popup (#2699) 

* Select: fix incorrect scrollTop on first popup

* Select: wrap tag text with a span
pull/2711/head
杨奕 2017-02-12 13:01:10 +08:00 committed by baiyaaaaa
parent 4d10f23a0c
commit 8d4b6f8f99
1 changed files with 25 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
packages/select/src/select.vue
View File

@ -17,7 +17,7 @@
type="primary" type="primary"
@close="deleteTag($event, item)" @close="deleteTag($event, item)"
close-transition> close-transition>
{{ item.currentLabel }} <span class="el-select__tags-text">{{ item.currentLabel }}</span>
</el-tag> </el-tag>
</transition-group> </transition-group>
@ -64,7 +64,10 @@
@mouseleave.native="inputHovering = false" @mouseleave.native="inputHovering = false"
:icon="iconClass"> :icon="iconClass">
</el-input> </el-input>
<transition name="el-zoom-in-top" @after-leave="doDestroy"> <transition
name="el-zoom-in-top"
@after-leave="doDestroy"
@after-enter="handleMenuEnter">
<el-select-menu <el-select-menu
ref="popper" ref="popper"
v-show="visible && emptyText !== false"> v-show="visible && emptyText !== false">
@ -208,8 +211,8 @@
selectedLabel: '', selectedLabel: '',
hoverIndex: -1, hoverIndex: -1,
query: '', query: '',
bottomOverflowBeforeHidden: 0, bottomOverflow: 0,
topOverflowBeforeHidden: 0, topOverflow: 0,
optionsAllDisabled: false, optionsAllDisabled: false,
inputHovering: false, inputHovering: false,
currentPlaceholder: '' currentPlaceholder: ''
@ -308,12 +311,6 @@
this.broadcast('ElInput', 'inputSelect'); this.broadcast('ElInput', 'inputSelect');
} }
} }
if (!this.dropdownUl) {
this.dropdownUl = this.$refs.popper.$el.querySelector('.el-select-dropdown__wrap');
}
if (!this.multiple && this.dropdownUl) {
this.setOverflow();
}
} }
this.$emit('visible-change', val); this.$emit('visible-change', val);
}, },
@ -346,24 +343,30 @@
} }
}, },
handleMenuEnter() {
if (!this.dropdownUl) {
this.dropdownUl = this.$refs.popper.$el.querySelector('.el-select-dropdown__wrap');
this.getOverflows();
}
if (!this.multiple && this.dropdownUl) {
this.resetMenuScroll();
}
},
getOverflows() { getOverflows() {
if (this.dropdownUl && this.selected && this.selected.$el) { if (this.dropdownUl && this.selected && this.selected.$el) {
let selectedRect = this.selected.$el.getBoundingClientRect(); let selectedRect = this.selected.$el.getBoundingClientRect();
let popperRect = this.$refs.popper.$el.getBoundingClientRect(); let popperRect = this.$refs.popper.$el.getBoundingClientRect();
this.bottomOverflowBeforeHidden = selectedRect.bottom - popperRect.bottom; this.bottomOverflow = selectedRect.bottom - popperRect.bottom;
this.topOverflowBeforeHidden = selectedRect.top - popperRect.top; this.topOverflow = selectedRect.top - popperRect.top;
} }
}, },
setOverflow() { resetMenuScroll() {
if (this.bottomOverflowBeforeHidden > 0) { if (this.bottomOverflow > 0) {
this.$nextTick(() => { this.dropdownUl.scrollTop += this.bottomOverflow;
this.dropdownUl.scrollTop += this.bottomOverflowBeforeHidden; } else if (this.topOverflow < 0) {
}); this.dropdownUl.scrollTop += this.topOverflow;
} else if (this.topOverflowBeforeHidden < 0) {
this.$nextTick(() => {
this.dropdownUl.scrollTop += this.topOverflowBeforeHidden;
});
} }
}, },
@ -436,7 +439,7 @@
}, },
doDestroy() { doDestroy() {
this.$refs.popper.doDestroy(); this.$refs.popper && this.$refs.popper.doDestroy();
}, },
handleClose() { handleClose() {