通过自定义组件学习Vue系列（二）【时间轴】（附源码）

需求：

用于升级日志的显示

效果图：

实现原理：

主要区域分为两块，时间区和内容区，时间区是画一个圆点和显示一个时间，内容区左边一个竖线和文字显示

然后做一下循环，将每个日期的数据显示出来

布局采用flex布局，用好flex布局，真的可以一把梭

css样式

画圆点：

   .time-dot {
        width: 7px;
        height: 7px;
        border-radius: 100%;
        background-color: rgba(0, 0, 0, .5);
   }

带竖线的内容区域

   .time-item {
        border-left: 1px solid rgba(0, 0, 0, .2);
        margin-left: 3px;
        line-height: 28px;
   }

数据格式：

        timeData:[
           {"date":"2023-1-1", "list":["新增PDF转WORD功能",'修复上传文件太大导致面面卡死的bug','修复了ppt部分页面不显示的问题','修改了其他已知问题']},
           {"date":"2023-12-25", "list":["新增线上富文编辑功能",'app端修复了文件上传未限制选择文件类型的bug']},
           {"date":"2023-12-22", "list":["修改了部分已知bug"]}
        ]

组件代码如下：

<template>
    <div class="flex flex-col">
        <div v-for="(item,index) in timeData" :key="index">
            <div class="flex flex-center-cz">
                <div class="time-dot"></div>
                <div class="margin-left-m ">{{item.date}}</div>
            </div>
            <div class="flex flex-col padding-m time-item" >
                <div v-for="detail in item.list">{{detail}}</div>
            </div>            
        </div>
    </div>
  </template>
   
  <script>
  export default {
      name: 'TimeAxis',
      props: {
          timeData: {},
      }
  }
  </script>
  
<style>
   .time-dot {
        width: 7px;
        height: 7px;
        border-radius: 100%;
        background-color: rgba(0, 0, 0, .5);
   }
   .time-item {
        border-left: 1px solid rgba(0, 0, 0, .2);
        margin-left: 3px;
        line-height: 28px;
   }
</style>

class 中 见到如 flex flex-col flex-center-cz padding-m, 定义在 /asset/css/base.css，如图：

将常用样式定义在一个公共样式的好处时，减少重复定义，便于维护。

源码：https://download.csdn.net/download/gdgztt/87585634

相关文章：

通过自定义组件学习Vue系列（五）【下拉多选框】（附源码）

通过自定义组件学习Vue系列（四）【导航菜单】（附源码）

通过自定义组件学习Vue系列（三）【仿浏览器缩放比例】（附源码）

通过自定义组件学习Vue系列（二）【时间轴】（附源码）

通过自定义组件学习Vue系列（一）【开关按钮】（附源码）