vue实现横向时间轴组件

最新推荐文章于 2025-04-17 15:01:47 发布

HELLO_小仙女~

最新推荐文章于 2025-04-17 15:01:47 发布

阅读量1.4w

点赞数 18

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45851208/article/details/124022550

版权

本文介绍了如何使用Vue来创建一个具备动态加载、鼠标悬停显示信息和子节点详情展示功能的横向时间轴组件。通过封装Timeline组件，并在父组件中引用，实现了根据屏幕滚动加载更多内容的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：项目中有需要用到横向时间轴，网上大部分组件不满足功能需要，于是自己写了一个。先上简单的demo。

功能：

默认获取初始数据显示对应的时间轴和时间点。
当超出屏幕后，滑动滚动条加载更多页，类似分页加载。
某个大的时间轴节点鼠标放入需要显示相关信息。
某两个大节点之间会有子节点出现。
每个子节点会有对应的子节点详情内容展示，无详情内容介绍的只展示子节点。

效果图

vue时间轴视频效果

在这里插入图片描述

代码

Timeline组件封装

<template>
  <ul class="timeline-wrapper" @scroll="scrollEvent">
    <li class="timeline-item" v-for="item in timelineList" :key="item.id">
      <div class="timeline-box">
        <div class="out-circle">
          <div class="in-circle"></div>
          <div class="timeline-date">
            <el-popover
              placement="bottom"
              title="标题"
              width="200"
              trigger="hover"
              :content="item.content"
            >
              <el-button type="text" slot="reference" class="father-text">{
   {
   
                item.date
              }}</el-button>
            </el-popover>
          </div>
        </div>
        <div
          class="long-line"
          v-show="item.isShow"
          :style="`width:${
     
            item.children ? (item.children.length + 1) * 100 : 1 * 100
          }px`"
        >
          <div
            v-for="(subItem, index) in item.children"
            :key="subItem.id"
            class="sub-item-box"
          >
            <span>{
   {
    subItem.name + ":" + subItem.num }}人</span>
            <!-- 根据奇数偶数来判断向上还是向下 -->
            <div
              :class="`sub-line-box ${
     
                index % 2 == 0 ? 'top-line-box' : 'bottom-line-box'
              }`"
              v-show="subItem.content"
            >
              <div
                :class="`children-line-box ${
     
                  index % 2 == 0 ? 'top-line' : 'bottom-line'
                }`"
              ></div>
              <div
                :class="`children-box ${
     
                  index % 2 == 0 ? 'top-children-box' : 'bottom-children-box'
                }`"
              >
                {
   {
    subItem.content }}
              </div>
            </div>
          </div>
        </div>

最低0.47元/天解锁文章