手写时间线与复选功能实现-优快云博客

本文链接：https://blog.youkuaiyun.com/webDevelopSnail/article/details/116565903

本文介绍了一个项目中遇到的大屏时间刻度筛选问题，由于对时间线的特殊要求（支持单选和复选，最多选择2个时间间隔），作者决定手写组件来满足需求。文中提供了一张实现效果的截图，并分享了相关代码。

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

最近项目接触大屏有对于时间刻度的筛选，由于时间线上可单复选且不能超过2个（2个是中间的时间间隔），查看element一些组件不符合要求，就手写一个，效果图如下：
在这里插入图片描述
代码附上：

1. html
    <div class="timeLine">
      <div
        class="item"
        v-for="(item, index) in items"
        :key="index"
        :class="hoursArr.includes(index) ? 'active' : ''"
        @click="onClick(item, index)"
      >
        <div class="item-index">{{ item.content }}</div>
      </div>
    </div>
  2. data数据
      items: [
        {
          content: "0时",
          timestamp: 0,
          isActive: false,
        },
        {
          content: "1时",
          timestamp: 2,
          isActive: false,
        }]
  3.css样式
  时间线
.timeLine {
  position: absolute;
  top: 400px;
  right: 26%;
  width: 51px;
  height: auto;
  border-radius: 8px;
  border: 1px solid #121378;
  background: #1b224b;
  .item {
    margin-left: 20px; /*用左边margin显示时间线*/
    width: calc(
      100% - 20px
    ); /*因为左边部分用于显示时间线，所以右边部分减去30px*/
    height: auto; /*高度由内容决定*/
    // position: absolute;
    margin-bottom: 10px;
    cursor: pointer;
    color: #fff;
    // "::before"伪元素作出时间线的节点
    &::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #91c2fc;
      position: absolute;
      left: 6px;
    }
    // ::after"伪元素作出时间线线段
    &::after {
      content: "";
      width: 2px;
      height: calc(100% + 10px); /*加上10px是item底部的margin*/
      background-color: #91c2fc;
      position: absolute;
      top: 0;
      left: 8px;
    }
    // 添加鼠标悬浮效果
    &:hover::before {
      transform: scale3d(1.6, 1.6, 3);
      background-color: yellow;
    }
    &:hover .item-index {
      transform: scale3d(1.01, 1.01, 1);
      color: yellow;
    }
    .item-index {
      line-height: 12px;
      font-size: 12px;
      position: relative;
      color: #656565;
    }
  }
}
.active {
  background: yellow;
}    

4.单复选动态类名及数量控制
    onClick(item, index) {
      console.log(this.hoursArr);
      if (this.hoursArr.includes(index)) {
        //es6 判断是否包含
        this.hoursArr = this.hoursArr.filter(function (item) {
          return item !== index;
        });
      } else {
        this.hoursArr.push(index);
        if (this.hoursArr.length > 2) {
          this.hoursArr.splice(0, 1);
        }
      }
    },

手写时间线及复选功能