技術標籤：總結vue

程式碼：

<template>
  <div class="app-container">
    <div class="timeLine" style="overflow: hidden;">
      <div class="ul_box">
        <ul class="my_timeline" ref="mytimeline" style="margin-left: 10px;">
          <li class="my_timeline_item" v-for="(item,index) in timeLineList" :key="index">
            <!--圈圈節點-->
            <div class="my_timeline_node" :style="{'position':index===timeLineList.length-1?'relative':'', 'top':index===timeLineList.length-1?'-4px':''}"></div>
            <!--線-->
            <div class="my_timeline_item_line" v-if="index !== timeLineList.length-1"></div>
            <!--標註-->
            <div class="my_timeline_item_content">
              <span>{{item.things}}</span>
              <span>{{item.timestamp}}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'',
  data() {
    return {
      timeLineList: [
        {
          things: '1',
          timestamp: '2021-01-01',
          remark: ''
        },
        {
          things: '2',
          timestamp: '2021-01-31',
          remark: ''
        },
        {
          things: '3',
          timestamp: '2021-05-30',
          remark: ''
        },
        {
          things: '4',
          timestamp: '2021-12-15',
          remark: ''
        },
        {
          things: '5',
          timestamp: '2022-02-20',
          remark: ''
        },
        {
          things: '6',
          timestamp: '2022-05-30',
          remark: '上海明華變更為香港明華'
        },
        {
          things: '7',
          timestamp: '2022-10-15',
          remark: ''
        },
        {
          things: '8',
          timestamp: '2022-21-01',
          remark: '香港明華變更為深圳明華'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.ul_box {
  width: 900px;
  height: 60px;
  display: inline-block;
  float: left;
  margin: 20px 2px;
  overflow: hidden;
}
.my_timeline_item {
  display: inline-block;
  width: 100px;
}
.my_timeline_node {
  width:10px;
  height: 10px;
  color: #467AE9;
  font-size: 18;
  background: #467AE9;
  box-sizing: border-box;
  border-radius: 50%;
}
.my_timeline_item_line {
  width: 90px;
  height: 10px;
  margin: -6px 0 0 10px;
  border-top: 2px solid #E4E7ED;
  border-left: none;
}
.my_timeline_item_content {
  margin: 10px 0 0 -10px;
  display: flex;
  flex-flow: column;
  cursor: pointer;
}
</style>
 

效果：

思路：

1.使用< ul > 標籤定義無序列表；

2.css樣式中的display: inline-block屬性 用來使< ul >標籤橫向展示；

3.最後一個是橫線，使用陣列長度判斷其不顯示，但此時出現最後一個圓圈的位置沒有水平對齊的問題，使用陣列長度判斷其位置上移。

參考文章：https://www.cnblogs.com/duanzhenzhen/p/10937675.html