vue+element 实现蛇形时间轴 拐弯时间轴

公司业务需要做一个如图效果 分享给有需要的人 有更好的意见欢迎交流

核心代码如下

 

    

      

        

          

            

              

                {{ v.content }}
              
            
          
        
      
      

        

          

            

              

                {{ v.content }}
              
            
          
        
      
    
  

数据

experienceData: [
  { content: '交换机外带管理' },
  { content: '交换机CLI界面调试' },
  { content: '交换机TELNET管理配置' },
  { content: '交换机生成树配置' },
  { content: '路由器TELNET管理配置' },
  { content: '路由器的外带管理' },
  { content: '交换机端口镜像配置' },
  { content: '链路聚合' },
  { content: '路由器带内管理' },
  { content: '路由器静态路由配置' },
  { content: '路由再发布' },
  { content: '静态路由（上、下）' },
  { content: 'IP编码与路由' },
  { content: 'TCP建立过程' },
  { content: 'OSI模型与TCP IP模型' },
],
idx: 4,//一行显示几个这里就写几

业务代码

displayProcessing(Arg, Num) {
  if (this.idx <= 0) {
    return []
  }
  let arr = Arg.slice(this.idx * (Num - 1), this.idx * Num)
  arr = Num % 2 == 0 ? arr.reverse() : arr
  return arr
},

css样式

.timeline {
  width: 200px;
  height: 60px;
}
.timeline2 {
  width: 200px;
  height: 60px;
}
.timeNodes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 14px;
  color: #3d3d3d;
}

.nodeTimelis {
  max-width: 150px;
  overflow: hidden;
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;
}

完结