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

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

开发语言主要是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: "11:00", status: 0 },
];

在点击按钮后将样式设置为自己想要的效果。

js选择逻辑介绍

//appointTimeArr 保存点击的按钮的数组，即当前选中数组
changTime(val,index){
    //当前选中数组的长度小于2时，即点击了1次、2次
      if(this.appointTimeArr.length < 2){
        this.timeArr[index].status=3;点击按钮的状态设为3，即当前选中
        this.appointTimeArr.push(index);
        //当前选中数组的长度为2，即点击了2次
        if(this.appointTimeArr.length==2){
        //选中数组的俩个下标一样时，即同一个时间点点击了两次，即取消选中，则把状态都重置为0，并且清空选中数组
          if(this.appointTimeArr[0]==this.appointTimeArr[1]){
            this.timeArr[this.appointTimeArr[0]].status=0;
            this.appointTimeArr=[];
          }else{
          	//选中数组的两个下下标不一样时，对数组进行排序，顺序排序，如若是[3,2]则改为[2,3]，开始时间点和结束时间点
            this.appointTimeArr=this.appointTimeArr.sort(function(a,b){return a-b});
            //求出开始时间和结束时间之间选中的时间点个数，
            let len=this.appointTimeArr[1]-this.appointTimeArr[0];
            //根据个数，把选中时间段内的时间的状态都改为3，即当前选中
            for(let i=0;i<len;i++){
            //将下选中数组内容的下标与时间数组的下标状态进行比对，若是有状态等于1的，即已有预约，则做出提示，并且把开始时间点和结束时间点重置为空，循环终止
              if(this.timeArr[this.appointTimeArr[0]+i].status==1){
                this.$message.warning("已预约过的时间不允许预约！")
                this.timeStart='';
                this.timeEnd='';
                break
              }else{
              //将最终获取到的选中数组下标与时间数组进行比对，获取开始时间点和结束时间点，并且状态改为3，即当前选中
                this.timeArr[this.appointTimeArr[0]+i].status=3;
                this.timeStart=this.timeArr[this.appointTimeArr[0]].time;
                this.timeEnd=this.timeArr[this.appointTimeArr[1]].time;
              }
            }
            
          }
        }
      }else if(this.appointTimeArr.length=3){//当前选中数组的长度等于3时，即点击了3次，则把前两个状态改为0，即未选中，把第三次点击时的状态设为3，即当前选中
        for(let i=0;i<this.timeArr.length;i++){
          if(this.timeArr[i].status===3){
            this.timeArr[i].status=0;
          }
        }
        this.appointTimeArr=[];
        this.appointTimeArr.push(index);
        this.timeArr[index].status=3;
      }
    }

3.样式调整

到这里大致已经完成了，但现在出现的效果大概是独立按钮样式出现，而现在就是处理首尾按钮连在一起效果。这里我给出的是最方便的方法，方法肯定不止这一种，大家可以讨论实现。

既然按钮之间有空隙的话我们知道div是长方形的，我在每个按钮外部套一个div盒子，当按钮状态改变时将预约数组中index范围内的所有div的背景色设置为跟按钮背景色一样，这样我们就能得到一个长条形状，然后再比较首尾的div,分别设置它们的左上角，左下角的border-radius以及右上角，右下角，这样我们就能模拟出选择条的效果了。

如果有疑问或者还要不明白的以及需要代码的欢迎私聊我~