Merge pull request #63 from QingWei-Li/fix/timepicker-scroll

TimePicker: scrollable time picker

CHANGELOG.md

@@ -5,6 +5,7 @@
 *2016-XX-XX*
 
 - 修复 Select 多选时选项变为空数组后 placeholder 不出现的问题
+- 修复 TimePicker 时间选择可滚动
 
 ### 1.0.0-rc.3
 

packages/date-picker/src/basic/time-spinner.vue

@@ -3,6 +3,7 @@
     {{hours}}
     <div
       @mouseenter="emitSelectRange('hours')"
+      @mousewheel="handleScroll('hour')"
       class="el-time-spinner__wrapper"
       ref="hour">
       <ul class="el-time-spinner__list">
@@ -17,6 +18,7 @@
     </div>
     <div
       @mouseenter="emitSelectRange('minutes')"
+      @mousewheel="handleScroll('minute')"
       class="el-time-spinner__wrapper"
       ref="minute">
       <ul class="el-time-spinner__list">
@@ -30,6 +32,7 @@
     </div>
     <div
       @mouseenter="emitSelectRange('seconds')"
+      @mousewheel="handleScroll('second')"
       class="el-time-spinner__wrapper"
       ref="second">
       <ul class="el-time-spinner__list">
@@ -140,6 +143,13 @@
         }
       },
 
+      handleScroll(type) {
+        const ajust = {};
+
+        ajust[`${type}s`] = Math.min(Math.floor((this.$refs[type].scrollTop - 80) / 32 + 3), 59);
+        this.$emit('change', ajust);
+      },
+
       ajustScrollTop() {
         this.$refs.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80);
         this.$refs.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80);

packages/date-picker/src/css/time-picker.css

@@ -17,6 +17,7 @@
       font-size: 0;
       display: flex;
       position: relative;
+      overflow: hidden;
 
       &::after, &::before {
         content: ":";
@@ -24,18 +25,25 @@
         color: #fff;
         position: absolute;
         font-size: 14px;
-        margin-top: -8px;
+        margin-top: -15px;
         line-height: 16px;
-        z-index: 1;
+        background-color: #20a0ff;
+        height: 32px;
+        z-index: -1;
+        left: 0;
+        right: 0;
+        box-sizing: border-box;
+        padding-top: 6px;
+        text-align: left;
       }
 
       &::after {
-        left: calc(100%/3);
+        left: calc(100%/3*2);
         margin-left: -2px;
       }
 
       &::before {
-        right: calc(100%/3);
+        padding-left: calc(100%/3);
         margin-right: -2px;
       }
     }

packages/date-picker/src/css/time-spinner.css

@@ -34,18 +34,13 @@
       line-height: 32px;
       font-size: 12px;
 
-      &:hover:not(.disabled) {
+      &:hover:not(.disabled):not(.active) {
         background: #E5E9F2;
         cursor: pointer;
       }
 
       &.active:not(.disabled) {
-        background-color: #20a0ff;
         color: #fff;
-
-        &:hover {
-          background-color: #1D8CE0;
-        }
       }
 
       &.disabled {