fixed #2071 change the time-picker style and scroll compute

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

@@ -2,7 +2,6 @@
   <div class="el-time-spinner" :class="{ 'has-seconds': showSeconds }">
     <el-scrollbar
       @mouseenter.native="emitSelectRange('hours')"
-      @mousewheel.native="handleScroll('hour')"
       class="el-time-spinner__wrapper"
       wrap-style="max-height: inherit;"
       view-class="el-time-spinner__list"
@@ -19,7 +18,6 @@
     </el-scrollbar>
     <el-scrollbar
       @mouseenter.native="emitSelectRange('minutes')"
-      @mousewheel.native="handleScroll('minute')"
       class="el-time-spinner__wrapper"
       wrap-style="max-height: inherit;"
       view-class="el-time-spinner__list"
@@ -36,7 +34,6 @@
     <el-scrollbar
       v-show="showSeconds"
       @mouseenter.native="emitSelectRange('seconds')"
-      @mousewheel.native="handleScroll('second')"
       class="el-time-spinner__wrapper"
       wrap-style="max-height: inherit;"
       view-class="el-time-spinner__list"
@@ -83,11 +80,22 @@
     },
 
     watch: {
+      hours(newVal) {
+        this.ajustElTop('hour', newVal);
+      },
+
+      minutes(newVal) {
+        this.ajustElTop('minute', newVal);
+      },
+
+      seconds(newVal) {
+        this.ajustElTop('second', newVal);
+      },
+
       hoursPrivate(newVal, oldVal) {
         if (!(newVal >= 0 && newVal <= 23)) {
           this.hoursPrivate = oldVal;
         }
-        this.hourEl.scrollTop = Math.max(0, (this.hoursPrivate - 2.5) * 32 + 80);
         this.$emit('change', { hours: newVal });
       },
 
@@ -95,7 +103,6 @@
         if (!(newVal >= 0 && newVal <= 59)) {
           this.minutesPrivate = oldVal;
         }
-        this.minuteEl.scrollTop = Math.max(0, (this.minutesPrivate - 2.5) * 32 + 80);
         this.$emit('change', { minutes: newVal });
       },
 
@@ -103,7 +110,7 @@
         if (!(newVal >= 0 && newVal <= 59)) {
           this.secondsPrivate = oldVal;
         }
-        this.secondEl.scrollTop = Math.max(0, (this.secondsPrivate - 2.5) * 32 + 80);
+
         this.$emit('change', { seconds: newVal });
       }
     },
@@ -135,6 +142,12 @@
       };
     },
 
+    mounted() {
+      this.$nextTick(() => {
+        this.bindScrollEvent();
+      });
+    },
+
     methods: {
       handleClick(type, value, disabled) {
         if (value.disabled) {
@@ -156,17 +169,29 @@
         }
       },
 
+      bindScrollEvent() {
+        const bindFuntion = (type) => {
+          this[`${type}El`].onscroll = (e) => this.handleScroll(type, e);
+        };
+        bindFuntion('hour');
+        bindFuntion('minute');
+        bindFuntion('second');
+      },
+
       handleScroll(type) {
         const ajust = {};
-
         ajust[`${type}s`] = Math.min(Math.floor((this[`${type}El`].scrollTop - 80) / 32 + 3), 59);
         this.$emit('change', ajust);
       },
 
       ajustScrollTop() {
-        this.hourEl.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80);
-        this.minuteEl.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80);
-        this.secondEl.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80);
+        this.ajustElTop('hour', this.hours);
+        this.ajustElTop('minute', this.minutes);
+        this.ajustElTop('second', this.seconds);
+      },
+
+      ajustElTop(type, value) {
+        this[`${type}El`].scrollTop = Math.max(0, (value - 2.5) * 32 + 80);
       }
     }
   };

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

@@ -24,7 +24,7 @@
         color: var(--color-white);
         position: absolute;
         font-size: 14px;
-        margin-top: -15px;
+        margin-top: -7px;
         line-height: 16px;
         background-color: var(--datepicker-active-color);
         height: 32px;