Vue sample code for implementing two-column horizontal timeline

1. Implement the component timelineH.vue
2. Calling Components

This article mainly introduces the sample code of Vue to realize two-column horizontal timeline, which is shared with you as follows:

First, let's take a look at the picture. It mainly implements a two-column horizontal timeline. I looked at what many people have implemented, and there is only one horizontal column. Moreover, the timeline of elementUI is only vertical and does not support horizontal. In the end, I could only implement it myself with tears. I didn't expect it to be okay. However, if there is a lot of data, page turning has not been implemented yet. Friends who have implemented this can tag me.

1. Implement the component timelineH.vue

The H in timelineH.vue stands for horizontal. It’s hard to name it, 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 {
                liWidth: 496, //The width of the entire li, to be consistent with the style of the li below liHalf: 248, //This is half the width of the li, so that the point on the middle horizontal line can find the correct position}
        }
    }
</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>

Implementation ideas:

The vertical line is realized by setting the left border of li. The main thing here is to put every second li in the middle of the previous li, so half of the entire width of the li should be set using absolute positioning left, and the distance from the top should also be calculated.
The blocks at each time point are realized by absolute positioning. It should be noted that the nodes in the upper column and the nodes in the lower column have different distances from the top, so I used CSS: nth-child (2n) to achieve the top distance of every second li.
Finally, the date node text is used to determine the odd and even numbers of li and set different top values.
Because there is no page turning function, the length of li needs to be adapted or the width of li needs to be reduced if the amount of data is large, otherwise it will look ugly if the amount of data is large. There is no optimization for the time being, but if it is to adapt to laptops, it can still be achieved by modifying the width of li and lihalf.

2. Calling Components

<div class="timelineHengContainer">
     <timelineH :timelineList='timelineList' />
</div>

js:

import timelineH from "@/components/timelineH.vue";
components:
        timelineH
},

data() {
    return {
          timelineList: [

                {
                    dateTime: '2021-09',
                    content: 'Welcome to mining, mine every day and get ore, hahahaha, welcome to mining, mine every day and get ore, hahahaha, welcome to mining, mine every day and get ore, hahahaha, welcome to mining, mine every day and get ore, hahahaha. '
                },{
                    dateTime: '2021-10',
                    content: 'Please keep warm in winter, it's too cold.Please keep warm in winter, it's too cold.Please keep warm in winter, it's too cold.Please keep warm in winter, it's too cold. '
                },{
                    dateTime: '2021-11',
                    content: 'The thirty-day post challenge has officially begun. I want a projector. I've always wanted to buy one. '
                },{
                    dateTime: '2021-12',
                    content: 'It's almost the end of the month, a new year begins, happy new year, a new year begins, happy new year, a new year begins, happy new year. '
                }
            ]
    }
}

css:

.timelineHengContainer {
        width: 100%;
        height: 227px;
        background-image: url('../../static/img/timelineBg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
}

OK, this has realized the timeline with two horizontal columns. You can copy the code and use it directly (using the CV method~). I spent two days on it. I referred to the method of drawing the vertical timeline of elementui, but failed. I also failed to implement it with pure div and css. The main reason was that I didn’t know how to draw the vertical lines of the two columns and the nodes. Finally, I thought of using li to directly add a border to achieve it.

This is the end of this article about the sample code for implementing a two-column horizontal timeline in Vue. For more relevant Vue two-column horizontal timeline content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: