修改element-plus的时间线timeline组件为横向时间线（vue3+elementPlus）

切图汪

已于 2024-04-24 10:50:11 修改

阅读量1w

点赞数 24

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript vue.js html 前端

于 2023-10-10 15:07:34 首次发布

本文链接：https://blog.csdn.net/m0_61692240/article/details/133747362

文章描述了作者如何修改饿了么的竖向组件以符合项目需求，展示了Vue模板、el-timeline的使用以及CSS样式调整的过程，以实现实时活动进度显示。

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

项目需求：

发现饿了么的组件是竖向的并且也不符合项目需求，便对组件进行修改

<template>
  <div class="processBox">
    <div class="title">工程进度</div>
    <el-divider />
    <div class="timelineProcessBox">
      <el-timeline class="timeline">
        <el-timeline-item
          class="lineitem"
          :class="activity.done ? 'active' : 'inactive'"
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.time"
        >
          <span style="display: flex; flex-direction: column">
            <span style="margin: 10px 0; font-size: 16px">
              {{ activity.content }}
            </span>
            <span style="color: #8c8c8c; font-size: 14px">
              {{ activity.people }}
            </span>
          </span>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>
<script lang="ts" setup>
const activities = [
  {
    content: '开工阶段',
    time: '2018-04-12 20:46',
    people: '五六七',
    done: true,
  },
  {
    content: '实施阶段',
    people: '吉吉国王',
    done: false,
    time: '2018-04-03 20:46',
  },
  {
    content: '竣工阶段',
    done: false,
    people: '熊大',
    time: '2018-04-03 20:46',
  },
  {
    content: '结算阶段',
    people: '',
    done: false,
    time: '',
  },
]
</script>
<style lang="scss" scoped>
.processBox {
  background-color: #fff;
  height: 210px;

  .title {
    font-size: 16px;
    font-weight: 600;
    padding-left: 32px;
    padding-top: 16px;
  }
  .timelineProcessBox {
    .timeline {
      display: flex;
      width: 95%;
      margin: 40px auto;
      .lineitem {
        transform: translateX(50%);
        width: 25%;
      }
    }
  }
}

:deep(.el-timeline-item__tail) {
  border-left: none;
  border-top: 2px solid #e4e7ed;
  width: 100%;
  position: absolute;
  top: 6px;
}
:deep(.el-timeline-item__wrapper) {
  padding-left: 0;
  position: absolute;
  top: 20px;
  transform: translateX(-50%);
  text-align: center;
}
:deep(.el-timeline-item__timestamp) {
  font-size: 14px;
}
.active {
  :deep(.el-timeline-item__node) {
    background-color: $login_word;
  }
  :deep(.el-timeline-item__tail) {
    border-color: $login_word;
  }
}
// 有active样式的下一个li
.active + li {
  :deep(.el-timeline-item__node) {
    background-color: $login_word;
  }
}
</style>

实现出来的样式：