前端vue2时间轴组件

### Vue 2 时间轴组件示例

对于 Vue 2 和 Element UI 的组合，Element UI 官方确实未提供 `el-timeline` 组件[^1]。因此，可以考虑使用第三方库或自行实现时间线组件。

#### 自行实现实例

下面是一个简单的基于 Vue 2 实现的时间线组件例子：

<template>
  <div class="timeline">
    <ul>
      <li v-for="(item, index) in items" :key="index" :class="{ 'is-active': item.active }">
        <span>{{ item.time }}</span>
        <p>{{ item.content }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { time: "9:00", content: "早上起床", active: true },
        { time: "10:00", content: "吃早餐", active: false },
        { time: "11:00", content: "去公司上班", active: false }
      ]
    };
  }
};
</script>

<style scoped>
.timeline ul li.is-active span {
  color: red;
}
</style>

此代码展示了如何利用 Vue 2 中的基础特性如循环渲染 (`v-for`) 来创建一个简单的时间线列表。

为了增强交互性和功能性，还可以进一步扩展该组件的功能，例如添加点击事件改变活动状态等操作。