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">
    <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>
</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>
/*时间轴*/
.custom-wrap {
  position: relative;
  height: 70px;
  //margin-top: 50px;
  margin-bottom: 20px;

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

    .timeline-content{
      position: relative;

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

      .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 {
      background-color: #ef9d01 !important;
      /*border: 5px solid #67C23A;*/
      margin-top: 2px;
      box-sizing: content-box;
      cursor: pointer;
    }
}
  .custom-search {
    margin-top: 26px;

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

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


</style>