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

Select: rework auto scroll to selected option

pull/5915/merge
wacky6.AriesMBP 2017-07-12 01:16:25 +08:00 committed by 杨奕
parent a32a3ef88b
commit e60ff9e9b6
1 changed files with 11 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -66,8 +66,8 @@
</el-input>
<transition
name="el-zoom-in-top"
@after-leave="doDestroy"
@after-enter="handleMenuEnter">
@before-enter="handleMenuEnter"
@after-leave="doDestroy">
<el-select-menu
ref="popper"
v-show="visible && emptyText !== false">
@ -103,6 +103,7 @@
import { addClass, removeClass, hasClass } from 'element-ui/src/utils/dom';
import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
import { t } from 'element-ui/src/locale';
import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
const sizeMap = {
'large': 42,
'small': 30,
@ -208,13 +209,10 @@
cachedPlaceHolder: '',
optionsCount: 0,
filteredOptionsCount: 0,
dropdownUl: null,
visible: false,
selectedLabel: '',
hoverIndex: -1,
query: '',
bottomOverflow: 0,
topOverflow: 0,
optionsAllDisabled: false,
inputHovering: false,
currentPlaceholder: ''
@ -290,7 +288,6 @@
}
});
if (!this.multiple) {
this.getOverflows();
if (this.selected) {
if (this.filterable && this.allowCreate &&
this.createdSelected && this.createdOption) {
@ -351,31 +348,13 @@
}
},
scrollToOption(className = 'selected') {
const menu = this.$refs.popper.$el.querySelector('.el-select-dropdown__wrap');
scrollIntoView(menu, menu.getElementsByClassName(className)[0]);
},
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() {
if (this.dropdownUl && this.selected && this.selected.$el) {
let selectedRect = this.selected.$el.getBoundingClientRect();
let popperRect = this.$refs.popper.$el.getBoundingClientRect();
this.bottomOverflow = selectedRect.bottom - popperRect.bottom;
this.topOverflow = selectedRect.top - popperRect.top;
}
},
resetMenuScroll() {
if (this.bottomOverflow > 0) {
this.dropdownUl.scrollTop += this.bottomOverflow;
} else if (this.topOverflow < 0) {
this.dropdownUl.scrollTop += this.topOverflow;
}
this.$nextTick(() => this.scrollToOption());
},
getOption(value) {
@ -534,6 +513,7 @@
this.$emit('input', option.value);
this.visible = false;
}
this.$nextTick(() => this.scrollToOption());
},
toggleMenu() {
@ -558,7 +538,6 @@
if (this.hoverIndex === this.options.length) {
this.hoverIndex = 0;
}
this.resetScrollTop();
if (this.options[this.hoverIndex].disabled === true ||
this.options[this.hoverIndex].groupDisabled === true ||
!this.options[this.hoverIndex].visible) {
@ -570,7 +549,6 @@
if (this.hoverIndex < 0) {
this.hoverIndex = this.options.length - 1;
}
this.resetScrollTop();
if (this.options[this.hoverIndex].disabled === true ||
this.options[this.hoverIndex].groupDisabled === true ||
!this.options[this.hoverIndex].visible) {
@ -578,19 +556,7 @@
}
}
}
},
resetScrollTop() {
let bottomOverflowDistance = this.options[this.hoverIndex].$el.getBoundingClientRect().bottom -
this.$refs.popper.$el.getBoundingClientRect().bottom;
let topOverflowDistance = this.options[this.hoverIndex].$el.getBoundingClientRect().top -
this.$refs.popper.$el.getBoundingClientRect().top;
if (bottomOverflowDistance > 0) {
this.dropdownUl.scrollTop += bottomOverflowDistance;
}
if (topOverflowDistance < 0) {
this.dropdownUl.scrollTop += topOverflowDistance;
}
this.$nextTick(() => this.scrollToOption('hover'));
},
selectOption() {