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

原创

已于 2022-03-14 11:08:08 修改 · 置顶 · 4.8k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #前端 #vue.js #flex

于 2020-10-28 21:44:18 首次发布

一、最初版本

简单实现了横向时间轴

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: '本周'