在el-timeline时间线组件中激活一个 el-timeline-item，使得边框和小圆圈都变成绿色

要在 Element UI 的 el-timeline 组件中使激活的一个 el-timeline-item 的边框和小圆圈都变成绿色，你可以通过设置自定义类来修改其样式。

示例代码

以下示例展示如何实现这一效果：

html
复制代码
<template>
  <div>
    <el-timeline>
      <el-timeline-item
        v-for="(item, index) in timelineData"
        :key="index"
        :timestamp="item.timestamp"
        :class="{ active: index === activeIndex }"
      >
        <div class="timeline-item-content">
          <h3>{{ item.title }}</h3>
          <p>{{ item.description1 }}</p>
          <p>{{ item.description2 }}</p>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 1, // 设置激活的时间线项索引
      timelineData: [
        {
          timestamp: '2022-01-01',
          title: '事件标题1',
          description1: '事件描述1的第一行。',
          description2: '事件描述1的第二行。',
        },
        {
          timestamp: '2022-02-01',
          title: '事件标题2',
          description1: '事件描述2的第一行。',
          description2: '事件描述2的第二行。',
        },
        {
          timestamp: '2022-03-01',
          title: '事件标题3',
          description1: '事件描述3的第一行。',
          description2: '事件描述3的第二行。',
        },
      ],
    };
  },
};
</script>

<style>
/* 默认时间线项样式 */
.el-timeline-item__dot {
  background-color: #c0c4cc;
  border: 2px solid #c0c4cc;
}

/* 激活的时间线项样式 */
.active .el-timeline-item__dot {
  background-color: green;
  border: 2px solid green;
}

.active::before {
  background-color: green;
}
</style>

解释

1. 数据驱动的时间线：

   • 在 data 中定义 timelineData 数组，包含每个时间线项的详细信息。
   • activeIndex 用于标识激活的时间线项的索引。

2. 动态生成时间线项：

   • 使用 v-for 指令遍历 timelineData 数组，为每个项生成一个 el-timeline-item。
   • 使用 :class="{ active: index === activeIndex }" 动态绑定 active 类，确保只有索引匹配 activeIndex 的项激活。

3. 自定义样式：

   • 默认情况下，.el-timeline-item__dot 设置了小圆圈的背景色和边框颜色。
   • .active .el-timeline-item__dot 设置激活项的小圆圈背景色和边框颜色为绿色。
   • .active::before 设置激活项的边框颜色为绿色。

总结

通过结合 Vue 的数据绑定和条件类绑定，配合自定义 CSS 样式，可以实现 Element UI el-timeline 组件中激活项的小圆圈和边框颜色变成绿色的效果。这样的方法简洁明了，易于维护和修改。

4o