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

TimeSelect: auto scroll to selected option

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

14
packages/date-picker/src/panel/time-select.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')"> <transition name="el-zoom-in-top" @before-enter="handleMenuEnter" @after-leave="$emit('dodestroy')">
<div <div
ref="popper"
v-show="visible" v-show="visible"
:style="{ width: width + 'px' }" :style="{ width: width + 'px' }"
:class="popperClass" :class="popperClass"
@ -18,6 +19,7 @@
<script type="text/babel"> <script type="text/babel">
import ElScrollbar from 'element-ui/packages/scrollbar'; import ElScrollbar from 'element-ui/packages/scrollbar';
import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
const parseTime = function(time) { const parseTime = function(time) {
const values = ('' || time).split(':'); const values = ('' || time).split(':');
@ -81,6 +83,7 @@
} else if (this.maxTime && compareTime(val, this.maxTime) > 0) { } else if (this.maxTime && compareTime(val, this.maxTime) > 0) {
this.$emit('pick'); this.$emit('pick');
} }
this.$nextTick(() => this.scrollToOption());
} }
}, },
@ -93,6 +96,15 @@
handleClear() { handleClear() {
this.$emit('pick'); this.$emit('pick');
},
scrollToOption(className = 'selected') {
const menu = this.$refs.popper.querySelector('.el-picker-panel__content');
scrollIntoView(menu, menu.getElementsByClassName(className)[0]);
},
handleMenuEnter() {
this.$nextTick(() => this.scrollToOption());
} }
}, },