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

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.
pull/12456/head
rang-ali 2018-08-22 05:18:44 +02:00 committed by Jikkai Xiao
parent 926bd90d11
commit 3009999c5a
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/date-picker/src/basic/time-spinner.vue
View File

@ -226,7 +226,7 @@
}, },
handleScroll(type) { 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); this.modifyDateField(type, value);
}, },
@ -247,7 +247,7 @@
if (this.arrowControl) return; if (this.arrowControl) return;
const el = this.$refs[type].wrap; const el = this.$refs[type].wrap;
if (el) { 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'; let content = (hour < 12) ? ' am' : ' pm';
if (isCapital) content = content.toUpperCase(); if (isCapital) content = content.toUpperCase();
return content; return content;
},
typeItemHeight(type) {
return this.$refs[type].$el.querySelector('li').offsetHeight;
},
scrollBarHeight(type) {
return this.$refs[type].$el.offsetHeight;
} }
} }
}; };