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

最新推荐文章于 2025-05-23 16:33:14 发布

by__csdn

最新推荐文章于 2025-05-23 16:33:14 发布

阅读量1.3k

点赞数 5

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

本文链接：https://blog.youkuaiyun.com/by__csdn/article/details/138254121

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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

本套代码时间轴样式和时间显示等皆可按照自己个人喜好进行修改，及其适合我们前端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;
    disp

最低0.47元/天解锁文章