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;
}

完结

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

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