vue timeline 开箱即用的时间轴组件，日志更新时间轴组件

年月展示时间轴组件

<template>
  <div>
    <Timeline 
      :title="title" 
      :data-list="dataList"
      :show-weather="showWeather">
    </Timeline>
  </div>
</template>

<script>
import Timeline from '@/components/Timeline'
  export default {
    name: 'timeline',
    components: {
      Timeline
    },
    data() {
      return {
        title: '时间轴',
        showWeather: true,
        dataList: [
          {
            year: '2021',
            date: '2021/09/10',
            weather: '晴天☀️',
            body: [
              {
                month: '9月',
                children: [
                  {
                    title: 'oauth'
                  },
                  {
                    title: '设计原则'
                  }
                ]
              },
              {
                month: '8月',
                children: [
                  {
                    title: 'guacamole'
                  },
                  {
                    title: 'java netty websocket'
                  },
                  {
                    title: 'python websocket'
                  },
                  {
                    title: 'git lfs文件'
                  }
                ]
              },
              {
                month: '7月',
                children: [
                  {
                    title: 'java springboot spring.factories作用'
                  },
                  {
                    title: '数据库建模 : 概念模型 , 逻辑模型和物理模型'
                  },
                  {
                    title: '数据中应不应使用外键'
                  },
                  {
                    title: '学习杂谈'
                  }
                ]
              },
              {
                month: '5月',
                children: [
                  {
                    title: 'Django时区设置问题'
                  }
                ]
              },
              {
                month: '2月',
                children: [
                  {
                    title: 'Typescript Install'
                  },
                  {
                    title: 'Django_Celery'
                  }
                ]
              },
              {
                month: '1月',
                children: [
                  {
                    title: 'Anaconda In Docker with CodeServer'
                  }
                ]
              },
            ]
          },
          {
            year: '2020',
            date: '2021/09/12',
            weather: '阴天☁️',
            body: [
              {
                month: '10月',
                children: [
                  {
                    title: 'What is k8s'
                  }
                ]
              },
              {
                month: '9月',
                children: [
                  {
                    title: 'jmockit'
                  }
                ]
              },
              {
                month: '8月',
                children: [
                  {
                    title: 'java并发编程'
                  },
                  {
                    title: 'add colorful'
                  }
                ]
              },
              {
                month: '7月',
                children: [
                  {
                    title: 'Elastic Mapping Field DataType'
                  },
                  {
                    title: '阿里巴巴高级算法专家威视：组建技术团队的一些思考'
                  },
                  {
                    title: 'ElasticSearch Mapping'
                  }
                ]
              }
            ]
          },
          {
            year: '2019',
            date: '2021/09/13',
            weather: '雨天☔️',
            body: [
              {
                month: '12月',
                children: [
                  {
                    title: 'ChatBot对话管理'
                  }
                ]
              },
              {
                month: '9月',
                children: [
                  {
                    title: 'ubuntu20 network config'
                  },
                  {
                    title: 'file share'
                  }
                ]
              }
            ]
          },
          {
            year: '2018',
            date: '2021/09/15',
            weather: '下雪❄️',
            body: [
              {
                month: '11月',
                children: [
                  {
                    title: 'mysql关键字'
                  }
                ]
              },
              {
                month: '9月',
                children: [
                  {
                    title: 'docker安装'
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

Timeline时间轴组件：

<template>
  <div class="timeline-wrap">
    <div class="timeline-header">
      <span>{{ title }}</span>
    </div>
    <div class="timeline-item" v-for="(item,index) in dataList" :key="index">
      <div class="item-version">
        <span>{{ item.year }}</span>
      </div>
      <!-- <div class="timeline-item-time">
        <code>{{ item.date }}</code>
        <span class="item-weather" v-if="showWeather">{{ item.weather }}</span>
      </div> -->
      <div class="timeline-item-content">
        <div v-for="(subItem,subIndex) in item.body" :key="subIndex">
          <span class="subItem-title">{{ subItem.month }}</span>
          <div class="subItem-children">
            <span v-for="(threeItem,threeIndex) in subItem.children" :key="threeIndex">{{ threeItem.title }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Timeline',
    data(){
      return {
        
      }
    },
    props: {
      title: {
        type: String
      },
      showWeather: {
        type: Boolean
      },
      dataList: {
        type: Array
      }
    }
  }
</script>

<style lang="scss" scoped>
@import "@/styles/timeline.scss";
</style>

Timeline时间轴样式：

$base-color: #84b9e5;

.timeline-wrap {
  padding: 20px 40px;
  .timeline-header {
    padding-bottom: 16px;
    span {
      font-size: 18px;
      font-weight: bold;
    }
  }
  .timeline-item {
    padding: 0px 10px 20px 20px;
    border-left: 1px solid $base-color;
    line-height: 1;
    position: relative;
    &::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      position: absolute;
      left: -4px;
      top: 0px;
      border: 1px solid $base-color;
      border-radius: 50%;
      background: #fff;
      background: $base-color;
    }
    .item-version {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 0.6em;
    }
    .timeline-item-time {
      margin-bottom: 12px;
      width: 200px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      code {
        margin: 0 1px;
        padding: .2em .4em;
        font-size: .9em;
        background: #f2f4f5;
        border: 1px solid #f0f0f0;
        border-radius: 3px
      }
      .item-weather {
        font-size: 14px;
      }
    }
    .timeline-item-content {
      font-size: 14px;
      .subItem-title {
        padding: 8px 0 8px 0;
        display: block;
        color: #000;
        font-size: 16px;
        font-weight: bold;
        // margin-left: 12px;
        
      }
      .subItem-children {
        line-height: 1;
        text-indent: 1em;
        padding: 7px 0 0 7px;
        span {
          display: block;
          position: relative;
          margin-bottom: 8px;
          text-indent: 2em;
          line-height: 1.2;
          cursor: pointer;
          text-decoration: underline;
          &::before {
            content: '';
            display: inline-block;
            width: 5px;
            height: 5px;
            position: absolute;
            left: 14px;
            top: 4px;
            border: 1px solid $base-color;
            border-radius: 50%;
            background: #fff;
          }
          &:hover {
            color: $base-color;
          }
        }
      }
    }
  }
}

日志更新时间轴组件

效果如下：

具体代码在github仓库里：https://github.com/Ritusan/color-library