This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

Above first, mainly to achieve two column horizontal timeline, looked at a lot of people, is only one column, and elementUI timeline only stand, do not support the lateral, in the end its only a tearful implements, unexpectedly can also, just didn’t realize if the data is a lot of pages, has realized the dig friends can @ me.

TimelineH. Vue

TimelineH. Vue H stands for horizontal, naming trouble, haha.

<template> <ul class="timelineHengBox"> <li class="timelineHengItem" v-for="(item,index) in timelineList" :key="index" :style="{left: index % 2 ! = 0? (liHalf*index)+52+'px':0,'border-right': index == timelineList.length - 2 ? '1px solid #FEFEFE' : 'none'}"> <div class="timeline_dot" :style="{top: index % 2 ! = 0? '-5px' : '93px'}"></div> <div class="timeline_dot" v-show="index == timelineList.length - 2" style="right: -6px; top:93px; left: unset;" ></div> <div class="timeline_wapper flex" :class="{'mt20': index % 2 ! = 0}"> <img src=".. /.. /static/img/excelIcon.png" class="bjIcon" :style="{'margin': index % 2 ! = 0? '11px 44px 0 42px' :''}"> <div>{{item.content}}</div> </div> <div class="timelineDate_bottom" :style="{'top': index % 2 ! = 0? '-20px' : '103px'}">{{item.dateTime}}</div> </li> </ul> </template> <script> export default { name: 'timelineH', props: {timelineList: {type: Array, default: []}}, data () {return {width: 496,// the width of the entire li, liHalf: }}} </script> <style scoped>. TimelineHengBox {color: # FFF; margin: 0; padding: 0 26px; width: 92%; padding-top: 18px; padding-bottom: 10px; margin-left: 26px; height: 87px; border-bottom: 3px solid #FEFEFE; } .timelineHengItem { list-style: none; height: 97px; width: 496px; border-left: 1px solid #FEFEFE; float: left; border-bottom: 3px solid #FEFEFE; position: relative; } .timelineHengItem:nth-child(2n) { position: absolute; left: 248px; border-bottom: 0; top: 115px; } .timeline_dot { width: 10px; height: 11px; background: #FEFEFE; position: absolute; left: -5px; top: 93px; } .timeline_dot:nth-child(2n) { top: -7px; } .timeline_wapper { width: 400px; text-align: left; font-size: 12px; color: #FFFFFF; line-height: 20px; } .mt20 { margin-top: 20px; } .bjIcon { width: 32px; height: 32px; margin: 31px 44px 0 42px; } .timelineDate_bottom { width: 80px; height: 20px; position: absolute; top: 103px; left: -60px; text-align: left; font-size: 14px; font-weight: bold; color: #FFBA00; margin-left: 77px; } </style>Copy the code

Implementation idea:

  1. The vertical line is achieved by setting the left border of li. The main purpose here is to put each second LI in the middle of the previous LI, so half of the entire width of Li should be set with absolute positioning left, and the distance from the top should also be calculated.
  2. The blocks of each time point are achieved by absolute positioning. It should be noted that the distance top of the nodes in the upper column and the distance top of the nodes in the following column are different, so I use CSS :nth-child(2n) to achieve the top distance of each second Li.
  3. Finally, the date node text is also used to judge the odd and even values of Li and set different top values
  4. Because there is no page-turning function, the length of Li needs to be adapted or the width of Li needs to be reduced because of the large amount of data. Otherwise, the large amount of data will be very ugly. There is no optimization for the time being, but if it is to adapt to the laptop, it can be achieved by modifying the width and lihalf of Li.

Call the component

<div class="timelineHengContainer"> <timelineH :timelineList='timelineList' /> </div> js:  import timelineH from "@/components/timelineH.vue"; components: { timelineH }, data() { return { timelineList: [ { dateTime: '2021-09', content: },{dateTime: '2021-10', content: '},{dateTime: '2021-11', content: },{dateTime: '2021-12', content: '}]}} CSS:.timelineHengContainer {width: 100%; height: 227px; background-image: url('.. /.. /static/img/timelineBg.png'); background-size: 100% 100%; background-repeat: no-repeat; }Copy the code

Now that you have a horizontal two-column timeline, you can copy the code and use it directly. At that time, I worked for two days, referring to the drawing method of elementui’s vertical timeline, but I failed to make it. I also failed to implement it with pure DIV and CSS, mainly because I didn’t know how to draw vertical lines of the two columns, and nodes. Finally, I thought of using Li to directly add a border to achieve it.

Welcome to correct any questions, thank you ~