vue3 timeline 时间线实现会拐弯的时间轴

Vue3 Timeline 时间线实现会拐弯的时间轴相对于普通的时间线来说更加有趣和独特。在实现这种时间轴时，我们可以使用 Vue3 的组件化开发方式来创建一个可重复使用的时间线组件。

首先，我们需要创建一个 TimeNode（时间节点）组件，用来表示每个时间点。我们可以为每个节点设置一个时间和一个事件描述。时间节点可以通过计算属性或者接收传递的属性来设定其位置。

接下来，在时间线组件中，我们需要创建一个数组来存储时间节点。我们可以使用 v-for 指令来遍历这个数组，并将每个时间节点渲染到视图中。

然后，我们可以使用 CSS 来为时间节点添加样式，使其能够正确地显示出拐弯的效果。我们可以为时间节点设置不同的样式类，然后在 CSS 中定义这些样式类的样式规则，来实现时间轴的拐弯效果。

最后，我们可以根据时间节点的数量和位置，计算出时间轴的长度和位置，然后通过 CSS 来设置时间轴的样式，使其正确地显示出拐弯的时间轴效果。

通过以上的步骤，我们就可以实现一个拐弯的时间轴组件。这个组件可以根据需要接收传递的属性，可以根据时间节点的数量和位置来自动计算出时间轴的样式，使其能够正确地显示出拐弯的效果。

总之，Vue3 Timeline 时间线实现会拐弯的时间轴，通过使用 Vue3 的组件化开发方式，结合计算属性、遍历数组、添加样式和计算位置等技巧，可以比较容易地实现出一个有趣和独特的时间轴组件。

相关问题

vue 结合vue-timeline 实现公司发展历程水平时间轴特效

Vue 结合 Vue-Timeline 可以轻松地创建动态的、美观的公司发展历程水平时间轴效果。首先，你需要安装 Vue 和 Vue-Timeline 插件到你的项目中。Vue-Timeline 是一个用于构建时间线视图的轻量级组件库。

以下是基本步骤：

1. **安装依赖**:

   npm install vue @vue/timeline --save

2. **引入并注册组件**:
在 `main.js` 或其他入口文件中引入并全局注册 Vue-Timeline 组件：

   import { Timeline } from '@vue/timeline';
   Vue.component('Timeline', Timeline);

3. **配置数据结构**:
定义一个包含日期和事件描述的对象数组，这将是时间轴的基础数据：

   const companyHistory = [
     {
       date: '2005年',
       description: '公司成立'
     },
     {
       date: '2010年',
       description: '产品发布1'
     },
     // ... 其他历史节点
   ];

4. **创建时间轴组件**:
使用 `<timeline>` 标签，并提供数据属性 `data`：

   <div>
     <timeline :data="companyHistory">
       <template slot-scope="{ item }">
         <div class="timeline-item">
           <p>{{ item.date }}</p>
           <p>{{ item.description }}</p>
         </div>
       </template>
     </timeline>
   </div>

5. **样式定制**:
你可以通过 CSS 来调整时间轴的外观，例如颜色、间距和动画效果。`@vue/timeline` 提供了一些内置样式，也可以自定义。

6. **响应式更新**:
如果公司的历史发展有新增或删除记录，只需要更新 `companyHistory` 数组即可，Vue 的响应式系统会自动更新界面。

vue3 timeline

### Vue3 中 `el-timeline` 组件的使用

在 Vue 3 和 Element Plus (Element UI 的 Vue 3 版本) 下，`el-timeline` 是一个用于展示一系列按时间顺序排列事件的时间线组件。此组件支持多种自定义选项，包括但不限于节点样式、图标设置以及内容区域的内容。

#### 属性说明

- **reverse**: 布尔型，默认为 false；如果设为 true，则会按照相反的方向显示条目。
- **pending**: 布尔型或字符串类型；当作为布尔值传入且为真时，在最后一条记录之后添加一个灰色占位符表示还有更多未加载的数据；也可以传递一段文字描述正在等待的状态[^1]。

#### 方法与事件

- 支持常规 DOM 事件监听器绑定方式，比如点击某个特定项触发相应操作等。

#### 示例代码

下面给出了一段简单的例子来演示如何创建一个基础版本的时间线：

<template>
    <div  class="example">
    <!--  时间线容器 -->
        <el-timeline :reverse="true">
         <!--  单个时间点  -->
            <el-timeline-item  timestamp="2023/9/1" placement="top">
        创建项目结构
      </el-timeline-item>

      <el-timeline-item timestamp="2023/9/5" type="primary" color="#0bbd87">
        完成初步设计稿
      </el-timeline-item>

      <el-timeline-item timestamp="2023/9/10" hide-timestamp>
        开始编码工作
      </el-timeline-item>
      
      <!-- 更多条目... -->

      <!-- 如果有 pending 参数则会出现最后一个虚线圆圈 -->
      <el-timeline-item v-if="loadingMore" />
    </el-timeline>
  </div>
</template>

<script  setup  lang="ts">
import { ref } from 'vue';

const loadingMore = ref(false);
// 可在此处模拟异步请求数据逻辑...
</script>

上述模板展示了三个不同样式的里程碑时刻，并设置了 reverse 属性让最新的活动位于顶部。此外还包含了隐藏时间戳的例子 (`hide-timestamp`) 以及通过条件渲染实现动态加载更多的效果(`v-if="loadingMore"`)。

除了官方提供的 `el-timeline`, 社区里也有不少优秀的替代方案可供选择, 如 `vue-cute-timeline` 或者 `timeline-vuejs`. 这些库通常具有更丰富的特性集或是更加灵活的设计理念，可以根据实际应用场景和个人喜好挑选合适的工具[^2][^3].