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

完结

相关推荐
Liudef0626 分钟前
2048小游戏实现
javascript·css·css3
鱼樱前端2 小时前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder3 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句3 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom3 小时前
JavaScript reduce()函数详解
javascript
小飞悟3 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子3 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手3 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
炒毛豆4 小时前
vue3.4中的v-model的用法~
前端·vue.js
前端康师傅4 小时前
JavaScript 中你不知道的按位运算
前端·javascript