CSS手写一个时间轴组件(Vue)

效果

分析

每一个时间轴块为一个整体，如下图：

将这个整体分为几部分：左边小圆点node、左边时间线line、右边title、右边内容content。

这样一来，可以将这个整体分成左右两部分。

左边部分的小圆点可以用一个div元素设置border-radis:50%来实现，下面的线实际上是一个空div增加了边框是属性。右边部分从上往下书写就好。

左边的两个部分可以用position:relative进行定位。

为了让组件可以跟随content的内容变化而变化，不设置height属性，直接默认auto就好。

组件参数设置

可以传入一个prop，prop中的item为各个对象，里面含有time和content属性。

代码

TimeLine.vue

<template>
  <div>
    <div class="timeline" v-for="(item, index) in eventData" :key="index">
      <div class="timeline-left">
        <div class="timeline-left-node"></div>
        <div class="timeline-left-line"></div>
      </div>
      <div class="timeline-card">
        <div class="timeline-card-title">{{ item.time }}</div>
        <div class="timeline-card-content">{{ item.event }}</div>
      </div>
    </div>

    <div class="timeline" >
      <div class="timeline-left">
        <div class="timeline-left-node"></div>
        <div class="timeline-left-line"></div>
      </div>
      <div class="timeline-card">
        <div class="timeline-card-title">2021-04-11</div>
        <div class="timeline-card-content">第一次写下这个组件</div>
      </div>
    </div>
    <div></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['eventData'],
  data() {
    return {
      
    };
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.timeline {
  padding-left: 20px;
  display: flex;

  &-left {
    margin-right: 5px;

    &-node {
      z-index: 5;
      position: relative;
      bottom: 1px;
      left: -5px;
      width: 15px;
      height: 15px;
      background-color: rgb(8, 223, 205);
      border-radius: 50%;
    }

    &-line {
      position: relative;
      bottom: 15px;
      height: 100%;
      border-left: 6px solid rgb(78, 107, 236);
    }
  }

  &-card {
    height: 100%;

    &-title {
      font-size: 15px;
      color: rgb(0, 0, 0);
      margin-bottom: 10px;
      color: rgb(172, 172, 172);
    }

    &-content {
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px 1px lightgray;
      margin-bottom: 20px;

      &:hover{
        cursor: pointer;
        position: relative;
        bottom: 4px;
      }
    }
  }
}

</style>