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

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

核心代码如下

<div style="display: flex; position: relative"><div style="width: 89%; margin: auto; padding: 10px 0"><div v-for="(item, index) in experienceData" :key="index" style="display: flex"><div v-if="(index + 1) % 2 != 0" style="display: flex; width: 100%"><divv-for="(v, i) in displayProcessing(experienceData, index + 1)":key="i"class="timeline":style="{backgroundImage: `url(${require(`@/assets/p_${i}.png`)})`,backgroundRepeat: 'no-repeat',backgroundSize:displayProcessing(experienceData, index + 1).length < idx && (index + 1) % 2 != 0 ? '100% 25%' : 'contain',flex: displayProcessing(experienceData, index + 1).length < idx && (index + 1) % 2 != 0 ? '1' : 'none',}"><div class="timeNodes"><div class="timeContent"><p class="nodeTimelis"><span>{{ v.content }}</span></p></div></div></div></div><div v-else style="display: flex; width: 100%; justify-content: end"><divv-for="(v, i) in displayProcessing(experienceData, index + 1)":key="i"class="timeline2":style="{backgroundImage:displayProcessing(experienceData, index + 1).length < idx && (index + 1) % 2 == 0? `url(${require(`@/assets/p_0${idx - 2 - i}.png`)})`: `url(${require(`@/assets/p_0${idx - 1 - i}.png`)})`,backgroundRepeat: 'no-repeat',backgroundSize:displayProcessing(experienceData, index + 1).length < idx && (index + 1) % 2 == 0 ? '100% 25%' : 'contain',flex: displayProcessing(experienceData, index + 1).length < idx && (index + 1) % 2 == 0 ? '1' : 'none',}"><div class="timeNodes"><div class="timeContent"><p class="nodeTimelis"><span>{{ v.content }}</span></p></div></div></div></div></div></div>
</div>

数据

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() : arrreturn 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;
}

完结