TimePicker: dynamic scroll position of time-spinner items (#12415)

Makes it possible to style the height of ".el-time-spinner__item". 
Removed the fixed values associated to a height and line-height: 32px. It's now possible to set whichever height a user wants and the scrollbar will adjust itself accordingly.

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

@@ -226,7 +226,7 @@
       },
 
       handleScroll(type) {
-        const value = Math.min(Math.floor((this.$refs[type].wrap.scrollTop - 80) / 32 + 3), (type === 'hours' ? 23 : 59));
+        const value = Math.min(Math.floor((this.$refs[type].wrap.scrollTop - (this.scrollBarHeight(type) * 0.5 - 10) / this.typeItemHeight(type) + 3) / this.typeItemHeight(type)), (type === 'hours' ? 23 : 59));
         this.modifyDateField(type, value);
       },
 
@@ -247,7 +247,7 @@
         if (this.arrowControl) return;
         const el = this.$refs[type].wrap;
         if (el) {
-          el.scrollTop = Math.max(0, (value - 2.5) * 32 + 80);
+          el.scrollTop = Math.max(0, value * this.typeItemHeight(type));
         }
       },
 
@@ -286,6 +286,12 @@
         let content = (hour < 12) ? ' am' : ' pm';
         if (isCapital) content = content.toUpperCase();
         return content;
+      },
+      typeItemHeight(type) {
+        return this.$refs[type].$el.querySelector('li').offsetHeight;
+      },
+      scrollBarHeight(type) {
+        return this.$refs[type].$el.offsetHeight;
       }
     }
   };