vue中利用flex布局实现横向时间轴简化

一、最初版本

简单实现了横向时间轴

1、初次实现效果如图：

2、代码如下：

<div class="timeline body-bgcolor">
        <!--时间线-->
        <div class="timeline-title">
          <span v-for="item in timeLineList" class="timeline-title-item">{{ item.title }}</span>
        </div>
        <div style="display:flex;">
          <div class="timeline-container">
            <div style="display:flex;">
              <div v-for="(item,index) in timeLineList" :key="index" style="flex:1; display:flex; flex-direction:column;">
                <div style="flex:1; display:flex">
                    <div class="dot" @click="changeActive(index)" :class="{active: index === timeIndex}"></div>
                  <div class="item" v-show="item.isShow"></div>
                </div>
                <div class="item_bottom"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
<script>
export default {
  name: "timeline",
  data() {
    return {
      timeIndex: 0,
      timeLineList: [
        {
          title: '全部',
          isShow: true
        },{
          title: '今天',
          isShow: true
        },{
          title: '昨天',
          isShow: true
        },{
          title: '本周',
          isShow: true
        },{
          title: '本月',
          isShow: true
        },{
          title: '最近30天',
          isShow: true
        },{
          title: '今年',
          isShow: false
        }]
    },
	methods: {
	    changeActive(index) {
	      this.timeIndex = index;
	      console.log('点击了时间点', index)
	    }
	}
</script>
<style scoped>
.timeline-container{
  width: 800px;
  height: 30px;
  margin-left: 50px;
}
.dot{
  border:2px solid #DCDFE6;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background: white;
  margin: 2px 0px;
  box-sizing: border-box;
}

.item{
  flex:1;
  border-bottom: 6px solid #DCDFE6;
  margin-bottom: 15px;
  box-sizing: border-box;
}

.item_bottom{
  flex:1;
  text-align:center;
  height: 15px;
  margin-top:7px;
  font-size: 14px;
}

.active{
  background-color: orange !important;
  /*border: 5px solid #67C23A;*/
  margin-top: -2px;
  box-sizing: content-box;
}
</style>

二、优化

项目要迁移到平台，因此进行了优化，增加了宽度的自适应

1、优化后效果如图：

2、代码如下：

<template>
  <!--  <div>-->
  <div class="custom-wrap body-bgcolor">
    <i class="lt-box-border-bg box-border-bg"></i>
    <i class="rt-box-border-bg box-border-bg"></i>
    <div class="custom-wrap">
      <el-row class="search-records">
        <el-col :span="13" class="timeline">
          <!--时间线-->
          <!--        <el-row>-->
          <!--          <el-col :span="3.43" v-for="item in timeLineList" :key="item.id" class="timeline-title-item">{{ item.title }}-->
          <!--          </el-col>-->
          <div style="display:flex;">
            <div v-for="item in timeLineList" :key="item.id" style="flex:1; display:flex; flex-direction:column;">
              <div style="flex:1; display:flex" class="timeline-content">
                <div class="timeline-title" :class="{'left10': item.title === '最近30天'}">{{ item.title }}</div>
                <div class="dot" @click="changeActive(item.id)" :class="{'active-dot': item.id === timeIndex}"></div>
                <div class="item" v-show="item.isShow"></div>
              </div>
              <div class="item_bottom"></div>
            </div>
          </div>
          <!--        </el-row>-->
        </el-col>
        <el-col :span="10">
          <div class="custom-search" style="display:flex;">
            <span>自定义时间</span>
            <el-date-picker v-model="dateValue" type="daterange" @change="selectDate" value-format="yyyy-MM-dd"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
            <el-button type="primary" size="mini" @click="searchRecord" class="search-btn">查询</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <i class="lb-box-border-bg box-border-bg"></i>
    <i class="rb-box-border-bg box-border-bg"></i>
  </div>
  <!--  </div>-->
</template>

<script>
export default {
  name: "TimeLine",
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      timeIndex: 0, // 时间类型 0 全部或自定义 1今天 2 昨天 3本周 4 本月 5 近30天 6今年 7季度
      timeLineList: [{
        id: 0,
        title: '全部',
        isShow: true
      }, {
        id: 1,
        title: '今天',
        isShow: true
      }, {
        id: 2,
        title: '昨天',
        isShow: true
      }, {
        id: 3,
        title: '本周',
        isShow: true
      }, {
        id: 4,
        title: '本月',
        isShow: true
      }, {
        id: 5,
        title: '最近30天',
        isShow: true
      }, {
        id: 6,
        title: '今年',
        isShow: false
      }],
      dateValue: '',
    }
  },
  methods: {
    // 选择时间轴时间点
    changeActive(index) {
      this.timeIndex = index;
      // console.log('点击了时间点', index)
      this.dateValue = ''
      this.$emit('timetable', this.timeIndex)
    },
    // 选择日期
    selectDate() {
      // console.log('选择了日期', this.dateValue)
    },
    // 点击确定按钮查询
    searchRecord() {
      // console.log('点击了确定按钮')
      this.timeIndex = 0 // 将类型设为自定义
      if (this.dateValue === "" || this.dateValue === null || this.dateValue === undefined) {
        this.dateValue = []
      }
      this.$emit('customtable', this.timeIndex, this.dateValue)
    },
  }
}
</script>

<style lang="less" scoped>
/deep/.el-date-editor .el-range-separator{
  width: 6%;
}

/*时间轴*/
.custom-wrap {
  position: relative;
  height: 70px;
  margin-top: 45px;
  margin-bottom: 10px;
  color: #fff;

  .timeline {
    height: 100%;
    margin-left: 20px;
    //margin-top: 40px;
    padding-top: 30px;

    .timeline-content{
      position: relative;

      .timeline-title {
        position: absolute;
        left: -2px;
        top: -22px;
        //text-align: left;
        //margin-left: 50px;
      }

      .left10{
        left: -15px;
      }

      .dot {
        border: 2px solid #DCDFE6;
        width: 20px;
        height: 20px;
        border-radius: 30px;
        background: white;
        margin: 6px 0;
        box-sizing: border-box;
        cursor: pointer;
      }
    }

    .item {
      flex: 1;
      border-bottom: 4px solid #DCDFE6;
      margin-bottom: 15px;
      box-sizing: border-box;
    }

    .item_bottom {
      flex: 1;
      text-align: center;
      height: 15px;
      margin-top: 7px;
      font-size: 14px;
    }

    .active-dot {
      width: 25px !important;
      height: 25px !important;
      background-color: #ef9d01 !important;
      //border: 5px solid #67C23A;
      //margin-top: 2px;
      margin-top: 2px !important;
      box-sizing: content-box;
      cursor: pointer;
    }

    .active-dot + .item{
      margin-bottom: 16px;
    }
  }
  .custom-search {
    margin-top: 26px;

    span {
      line-height: 40px;
      margin-right: 20px;
    }

    .search-btn {
      width: 60px;
      margin-left: 20px;
      padding-left: 10px;
    }
  }
}

</style>

</style>

如果大家想一起交流学习，共同进步，欢迎搜索公众号“是日前端”，输入关键词如：前端基础，获取资料，资料刚开始整理，目前还在完善中，点击交流群按钮进交流群，群里仅限技术交流、面试交流等，需要其它相关资料可以群里说，后续交流群人数增多会考虑特色内容，再次感谢大家的支持~