vue 时间轴

<template>
  <div class="timeline">
    <div v-for="(item, index) in timelineItems" :key="index" class="timeline-item">
      <div class="timeline-point"></div>
      <div class="timeline-content">
        <h3>{{ item.title }}</h3>
        <p>{{ item.description }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timelineItems: [
        { title: '事件1', description: '这是第一个事件的描述' },
        { title: '事件2', description: '这是第二个事件的描述' },
        { title: '事件3', description: '这是第三个事件的描述' }
      ]
    };
  }
};
</script>

<style scoped>
.timeline {
  position: relative;
  padding: 20px 0;
}

.timeline::before {
  content: '';
  position: absolute;
  width: 4px;
  background-color: #ccc;
  top: 0;
  bottom: 0;
  left: 40px;
  margin-left: -2px;
}

.timeline-item {
  padding: 20px 0;
  position: relative;
}

.timeline-point {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 4px solid #ccc;
  border-radius: 50%;
  position: absolute;
  left: 28px;
  top: 10px;
}

.timeline-content {
  padding-left: 60px;
}
</style>

解释说明

1. 模板部分 (<template>):

   • 使用 v-for 指令遍历 timelineItems 数组，生成时间轴上的每个事件项。
   • 每个事件项包含一个圆点 (timeline-point) 和内容区域 (timeline-content)。

2. 脚本部分 (<script>):

   • 定义了一个 data 函数，返回一个包含 timelineItems 的对象。timelineItems 是一个数组，每个元素代表时间轴上的一个事件，包含 title 和 description 属性。

3. 样式部分 (<style scoped>):

   • 使用伪元素 ::before 创建一条贯穿整个时间轴的线条。
   • 通过绝对定位和相对定位来调整各个元素的位置，确保时间轴的布局正确。
   • timeline-point 类用于创建每个事件的时间点（圆点），并通过绝对定位将其放置在合适的位置。
   • timeline-content 类用于定义每个事件的内容区域，并通过 padding-left 确保内容与时间点对齐。

这个示例代码展示了一个简单的时间轴组件，可以根据需要进一步扩展和美化。