简而言之，用element-ui，其中的时间选择组件，改叭改叭变成仅选择小时的组件，也就是去掉了分钟和秒钟的那两列。
Hour Picker
组件部分
<template v-else-if="item.type === 'hourpicker'">
<el-time-picker
is-range
style="width: 100%"
v-bind="item.otherOptions"
v-model="formData[item.field]"
format="HH"
value-format="HH"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
popper-class="hour-picker"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
:picker-options="{
minTime: '00',
maxTime: '23'
}"
/>
</template>
我对element-ui还不是很了解，目前就是边抄边摸索。
（那么改控件这个事情做下来，对我去理解vue和组件，有不小的帮助。其实回顾我学习各种技术的过程，我都习惯这么改，改出问题，才能理解地更好）
-
format和value-format
只显示小时，具体可以自行查阅
:disabled-minutes
标注哪些分钟数是不可以选的。
比如只想要0,15,30,45，其他都不可以选，就返回[1,2,3,...14,16...,29,31,...44,46,...,59]
（注意只是不可选，不是隐藏。知道怎么隐藏的朋友，可以评论区留言）
popper-class
这个是重点
在自己页面里添加了这个el-time-picker组件，会在页面显示一个输入框，用来展示（或填写）小时的范围，比如显示[ 08-12 ] 就是上午8点-12点的意思。
但是点击这个输入框，会弹出新的控件，就是所谓的popper（默认是有时分秒三列的滚轮选择），那么它的class属性，就由popper-class来指定。否则即使你在时间输入框那里设置class，跟弹出的控件popper也没任何关系。
样式部分
<style scoped lang="less">
...其他样式
:global(.hour-picker .el-time-spinner>.el-scrollbar:nth-child(1)) {
width: 90% !important;
}
:global(.hour-picker .el-time-spinner>.el-scrollbar:nth-child(2)) {
display: none !important;
}
:global(.hour-picker .el-time-spinner>.el-scrollbar:nth-child(3)) {
display: none !important;
}
:global(.hour-picker .el-time-range-picker.el-picker-panel) {
width: 200px !important;
}
</style>
上面的样式就是：
- 隐藏分钟列和秒钟列
2.调整宽度，否则太宽，视觉效果不好看
-
scoped和:global(...)
一般默认都会带上scoped，这里我也不改了。其实也可以分开写：
<style scoped lang="less">
...局部的样式
</style>
<style lang="less">
...全局的样式
</style>
