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%">
        <div
          v-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">
        <div
          v-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() : 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;
}

完结