vue timeline时间轴点击页面整体联动

最新推荐文章于 2024-07-30 11:38:40 发布

咖啡有点酷

最新推荐文章于 2024-07-30 11:38:40 发布

阅读量2.5k

点赞数

本文链接：https://blog.csdn.net/qq_40295815/article/details/103821193

版权

这篇博客展示了如何在Vue中创建一个时间轴，并实现点击时间轴项时页面整体联动的效果。作者提供了代码示例，其中chooseHeaderItem方法可以根据实际需求进行定制，同时headerList包含各页面路由ID，以适应大屏展示并处理中间Logo的分割情况。文章还提到了mocklist的路由结构，帮助读者理解整个应用场景。

摘要由CSDN通过智能技术生成

效果图：其实下面代码显示的是年份，自行替换你需要的就是了

由于我的时间轴要去根据页面的真假数据进行改变，所以下面的 chooseHeaderItem方法你可以自己改，图片自己找吧

headerList 这个是我写的页面，每个页面对应路由的id，毕竟是大屏，中间有个logo分割了，所以有index判断

<template lang="html">
  <div class="cockpit-header-wrapper">
    <!-- 中头 -->
    <div class="time-line">
      <div class="full-container" id="time-line"></div>
      <img src="~assets/images/left.png"
        class="prev-img" alt="" @click="prevBtn()">
      <img src="~assets/images/right.png"
        class="next-img" alt="" @click="nextBtn()">
    </div>

    <!-- 左侧 -->
    <div class="left-item">
      <div class="inline-block item-div header-bg-left"
        :class="{ 'active': item.title == chooseItem.title }"
        v-for="(item, index) in headerList" v-if="index < 3"
        @click.prevent="chooseHeaderItem(item)">
        <img :src="item.icon" class="inline-block icon-img" alt="">
        <div class="inline-block">
          {
  { item.title }}
        </div>
      </div>
    </div>

    <!-- 右侧 -->
    <div class="right-item">
      <div class="inline-block item-div header-bg-right"
        :class="{ 'active': item.title == chooseItem.title }"
        v-for="(item, index) in headerList" v-if="index > 2"
        @click.prevent="chooseHeaderItem(item)">
        <img :src="item.icon" class="i