如题所述
为了解决vue2版本的系统中多选时间的需求，作者决定自定义一个组件，以满足直接点选、无滚动的需求。
实现过程如下：
首先，明确需求是多选时间而非日期，因此简化了实现。将小时和分钟固定，通过调整分钟显示数量以减少密集度。实现时，时间选择框仅在特定区域可见，如非多选时间框区域。
在弹框交互方面，添加了清空功能，当输入框内容消失且焦点移除时，弹框会自动关闭。这是自定义弹框组件中常见的一种小功能，可作为独立的hook使用。
上下箭头的点击逻辑中，处理了小时和分钟的边界情况，例如小时从23跳转到00，分钟从59跳转到00时需要相应调整。组件接受原始值并处理后返回处理结果，外部调用时只需传入原始值即可。
整个组件基于element-ui构建，展示了作者对现有框架的灵活运用和对用户需求的精细考虑。
实现过程如下：
首先，明确需求是多选时间而非日期，因此简化了实现。将小时和分钟固定，通过调整分钟显示数量以减少密集度。实现时，时间选择框仅在特定区域可见，如非多选时间框区域。
在弹框交互方面，添加了清空功能，当输入框内容消失且焦点移除时，弹框会自动关闭。这是自定义弹框组件中常见的一种小功能，可作为独立的hook使用。
上下箭头的点击逻辑中，处理了小时和分钟的边界情况，例如小时从23跳转到00，分钟从59跳转到00时需要相应调整。组件接受原始值并处理后返回处理结果，外部调用时只需传入原始值即可。
整个组件基于element-ui构建，展示了作者对现有框架的灵活运用和对用户需求的精细考虑。
温馨提示：答案为网友推荐，仅供参考
