移动端预约会议时间条选择组件设计开发启示

本文将介绍时间选择组件的设计实现思路，同时给出时间选择后背景连在一起效果的实现方案。

开发语言主要是Vue。

1.功能说明

开发一个类似日历的选择时间的组件，在移动端用户可以点击选择时间进行预约，点击首尾时间将首尾之间的所有时间连接在一起的效果，中间出现不可预约时间将清空选择区域。

类似如下的效果，头部是由一个tab栏组成，在每个日期下由时间点构成，点击进行选择。

2.开发思路

        首先我们应该想到时间点可以用按钮去渲染，每个时间点都为一个按钮，而我们需要后端去给我们一个对象数组，传递类似如下，这样我们能更好的控制按钮的状态，每个对象对应一个按钮，状态对应样式，此时应该有点思路了，我们可以用状态0表示可以预约，1表示不可预约（例如有人占用、过了时间段之类的），当我们点击按钮时改变对应的状态，而我们可以控制样式根据状态进行渲染展示。

[
  { time: "8:00", status: 1 },
  { time: "8:30", status: 1 },
  { time: "9:00", status: 0 },
  { time: "9:30", status: 0 },
  { time: "10:00", status: 0 },
  { time: "10:30", status: 0 },
  { time: