From 242a0a528718b8ed4cd8587369e7d0624b580f7f Mon Sep 17 00:00:00 2001
From: "qingwei.li" <cinwell.li@gmail.com>
Date: Mon, 12 Sep 2016 18:42:58 +0800
Subject: [PATCH] TimePicker: scrollable time picker

add changelog
---
 CHANGELOG.md                                    |  1 +
 packages/date-picker/src/basic/time-spinner.vue | 10 ++++++++++
 packages/date-picker/src/css/time-picker.css    | 16 ++++++++++++----
 packages/date-picker/src/css/time-spinner.css   |  7 +------
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 63c08d4c7..136277c8a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 *2016-XX-XX*
 
 - 修复 Select 多选时选项变为空数组后 placeholder 不出现的问题
+- 修复 TimePicker 时间选择可滚动
 
 ### 1.0.0-rc.3
 
diff --git a/packages/date-picker/src/basic/time-spinner.vue b/packages/date-picker/src/basic/time-spinner.vue
index 1a98fd07b..c389718b0 100644
--- a/packages/date-picker/src/basic/time-spinner.vue
+++ b/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);
diff --git a/packages/date-picker/src/css/time-picker.css b/packages/date-picker/src/css/time-picker.css
index a34d8c8d6..5da9fa10f 100644
--- a/packages/date-picker/src/css/time-picker.css
+++ b/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;
       }
     }
diff --git a/packages/date-picker/src/css/time-spinner.css b/packages/date-picker/src/css/time-spinner.css
index cd3775a85..731f46a78 100644
--- a/packages/date-picker/src/css/time-spinner.css
+++ b/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 {