前端VUE2/VUE3/uniapp/微信小程序进度条时间段选择（开始时间，结束时间）

最新推荐文章于 2024-09-24 10:52:00 发布

by__csdn

最新推荐文章于 2024-09-24 10:52:00 发布

阅读量1k

点赞数 5

分类专栏： vue 文章标签： vue.js javascript 前端框架前端

本文链接：https://blog.csdn.net/by__csdn/article/details/138254121

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章介绍了如何在前端项目中创建一个可定制的时间进度条，用于显示和选择会议室、课程等预约时间段，代码适用于Vue2、Vue3和UNIAPP，并详细解释了HTML、CSS和JavaScript部分的实现原理。

摘要由CSDN通过智能技术生成

在日常项目开发过程中，我们经常会遇到时间进度条已预约时间段的展示包括在进度条上面继续选择我们所需要的时间（例如，会议室，课程等预约时间）

白色：默认时间段颜色未选中的时间段。

灰色：从接口数据获取的已预约的时间段。

深蓝色：选中的两个时间。

浅蓝色：选中的两个时间之间的时间段。

本套代码时间轴样式和时间显示等皆可按照自己个人喜好进行修改，及其适合我们前端CV大师无脑使用，复制代码到本地即可运行查看效果。

代码适用于VUE2、VUE3、UNIAPP等。

HTML部分如下：

<div class="box">
    <div class="boxs" v-for="(item, index) in state.timeList" :key="index">
        <div :class="item.diaable == 1 ? 'boxs1' : item.disable == 1 ? 'boxs2' : 
            item.disables == 1 ? 'boxs3' : 'boxs0'" @click="selectTimeEvent(item,     
            index)">
        </div>
        {{ item.name }}
    </div>
</div>

CSS部分如下：

.box {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .boxs {
    width: 60px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20rpx;
  }
  .boxs0{
    width: 60px;
    height: 20px;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  .boxs1 {
    width: 60px;
    height: 20px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background-color: rgba(204, 204, 204, 0.5);
  }
  .boxs2 {
    width: 60px;
    height: 20px;
    border: 1px solid rgb(24, 144, 255);
    box-sizing: border-box;
    background-color: rgb(24, 144, 255);
  }
  .boxs3 {
    width: 60px;
    height: 20px;
    border: 1px solid rgba(24, 144, 255, 0.1);
    box-sizing: border-box;
    background-color: rgba(24, 144, 255, 0.1);
  }

提示：

.boxs0：默认时间段样式。

.boxs1：接口中获取到的已预约的时间段样式。

.boxs2：选中的开始时间和结束时间的时间样式。

.boxs3：选中的开始和结束时间之间的时间段样式。

JS部分如下：

1.data中的数据

    selectTime: [],
    timeActive: [],
    tabs: 0,
    timeLists: [],
    timeList: [
      { name: '8:00:00', index: 0, diaable: 0, disable: 0, disables: 0 },
      { name: '8:30:00', index: 1, diaable: 0, disable: 0, disables: 0 },
      { name: '9:00:00', index: 2, diaable: 0, disable: 0, disables: 0 },
      { name: '9:30:00', index: 3, diaable: 0, disable: 0, disables: 0 },
      { name: '10:00:00', index: 4, diaable: 0, disable: 0, disables: 0 },
      { name: '10:30:00', index: 5, diaable: 0, disable: 0, disables: 0 },
      { name: '11:00:00', index: 6, diaable: 0, disable: 0, disables: 0 },
      { name: '11:30:00', index: 7, diaable: 0, disable: 0, disables: 0 },
      { name: '12:00:00', index: 8, diaable: 0, disable: 0, disables: 0 },
      { name: '12:30:00', index: 9, diaable: 0, disable: 0, disables: 0 },
      { name: '13:00:00', index: 10, diaable: 0, disable: 0, disables: 0 },
      { name: '13:30:00', index: 11, diaable: 0, disable: 0, disables: 0 },
      { name: '14:00:00', index: 12, diaable: 0, disable: 0, disables: 0 },
      { name: '14:30:00', index: 13, diaable: 0, disable: 0, disables: 0 },
      { name: '15:00:00', index: 14, diaable: 0, disable: 0, disables: 0 },
      { name: '15:30:00', index: 15, diaable: 0, disable: 0, disables: 0 },
      { name: '16:00:00', index: 16, diaable: 0, disable: 0, disables: 0 },
      { name: '16:30:00', index: 17, diaable: 0, disable: 0, disables: 0 },
      { name: '17:00:00', index: 18, diaable: 0, disable: 0, disables: 0 },
      { name: '17:30:00', index: 19, diaable: 0, disable: 0, disables: 0 },
      { name: '18:00:00', index: 20, diaable: 0, disable: 0, disables: 0 },
      { name: '18:30:00', index: 21, diaable: 0, disable: 0, disables: 0 },
      { name: '19:00:00', index: 22, diaable: 0, disable: 0, disables: 0 },
      { name: '19:30:00', index: 23, diaable: 0, disable: 0, disables: 0 },
      { name: '20:00:00', index: 24, diaable: 0, disable: 0, disables: 0 },
    ],

提示：

selectTime: [],//选中的两个时间的数组
timeActive: [],//接口中返回的已预约时间段数据数组
tabs: 0,//点击两个时间选中的判断标识
timeLists: [],//选中的两个时间的index值，主要作用于对两个时间之间的时间段进行浅蓝色样式标识
timeList: [ ],//展示的时间数组

timeList下的name字段：展示的时间名

timeList下的index字段：记录点击的两个时间的index值，数组中index值在这两个时间之内的index值及为选中的时间段。

timeList下的diaable字段：默认为0，接口中返回的已预约时间段在timeList数组中进行循环，并将对应的时间的index值进行值赋值为1，进行淡灰色样式处理。

timeList下的disable字段：默认为0，点击选中的两个时间，赋值为1，进行深蓝色样式处理。

timeList下的disables字段：默认为0，点击选中的两个时间之间的时间段，赋值为1，进行淡蓝色样式处理。

2.点击按钮方法

function selectTimeEvent(item, index) {
    if (item.diaable == 1 || state.timeActive.indexOf(index) > -1) return;
    state.tabs++;
    if (state.tabs % 2 == 0) {
      state.selectTime[1] = state.timeList[index]['name'];
    } else {
      state.selectTime[0] = state.timeList[index]['name'];
    }
    for (let i = 0; i < state.timeList.length; i++) {
      if (state.timeList[i].name == state.selectTime[0] || state.timeList[i].name == state.selectTime[1]) {
        state.timeList[i].disable = 1;
        if (state.timeLists.length == 2) {
          state.timeLists.shift(); 
        }
        state.timeLists.push(state.timeList[i].index);
      } else {
        state.timeList[i].disable = 0;
      }
    }
    for (let i = 0; i < state.timeList.length; i++) {
      if (
        (state.timeList[i].index > state.timeLists[0] && state.timeList[i].index < state.timeLists[1]) ||
        (state.timeList[i].index > state.timeLists[1] && state.timeList[i].index < state.timeLists[0])
      ) {
        state.timeList[i].disables = 1;
      } else {
        state.timeList[i].disables = 0;
      }
    }
  }

提示：

本方法为VU3书写方法，若是VUE2或者UNIAPP,将state更改为this即可。