在table里历经磨难的时间选择器组件的构建记录

利用<关键词列表>：

最近在新增TMAP-UI组件库的开发过程中，遇到一个开发者强烈反馈需求较多的一个组件——时间选择器。今天把在开发过程中遇到的一些问题和解决方案分享给大家。

我们项目中的时间选择器不同于element-ui提供的原生选择器，交互设计师是根据地图实际应用场景中的特性抽象出的组件。element-ui的样式以及交互操作都不完全适用。于是我决定自己实现一个timepicker组件。

根据业务需求，我们的组件需要支持直接输入时间、从日历中选择时间、从时间列表中选择时间三种方式。由于element-ui没有我们需要的特性，因此我们采用CSS编写整个组件。当时也有一些现成的日期时间选择器组件可以供我们选择，例如vue-date-picker，vue-datetime-picker。但综合考虑后，还是决定自己实现一个，主要是考虑到组件可定制性。

遇到的第一个问题是无法在表格中选择时间

我们项目有这样一个需求：在一个table中，每一行都有一个时间选择器，用户可以在其中选择时间。当我在table中使用timepicker组件时，组件无法正常工作。

问题原因分析：

仔细分析后，我发现问题出在CSS上。在table中，每一个单元格都是一个独立的元素，而timepicker组件是一个整体的元素。当timepicker组件在table单元格中时，它的CSS样式被table单元格的CSS样式覆盖了，导致组件无法正常工作。

解决方案：

为了解决这个问题，我给timepicker组件添加了一个单独的CSS类，这个类可以覆盖table单元格的CSS样式。这样，timepicker组件就可以正常工作了。

遇到的第二个问题是无法使用键盘操作选择时间

在开发过程中，我们发现timepicker组件无法使用键盘操作选择时间。这对于那些习惯使用键盘的用户来说是一个很大的不便。

问题原因分析：

经过分析，我发现问题出在组件的交互设计上。timepicker组件使用鼠标操作选择时间时，会触发相应的事件。但是，当使用键盘操作时，不会触发这些事件。

解决方案：

为了解决这个问题，我修改了组件的交互设计，使其在键盘操作时也会触发相应的事件。这样，用户就可以使用键盘操作选择时间了。

遇到的第三个问题是无法在移动端使用

当我们在移动端使用timepicker组件时，发现组件无法正常工作。这对于那些需要在移动端使用组件的用户来说是一个很大的问题。

问题原因分析：

经过分析，我发现问题出在组件的样式上。timepicker组件的样式是为桌面端设计的，不适合移动端。

解决方案：

为了解决这个问题，我修改了组件的样式，使其适合移动端。这样，用户就可以在移动端使用组件了。

上述便是我们在开发时间选择器组件时遇到的主要问题和解决方案。通过解决这些问题，我们最终开发出了一个符合业务需求、功能完善的时间选择器组件。希望我们的经验能给其他开发者带来帮助。