目錄

• 一、實現元件timelineH.
• 二、呼叫元件

本文主要介紹了vue實現兩列水平時間軸的示例程式碼，分享給大家，具體如下：

先上圖，主要實現兩列水平時間軸，查看了很多人實現的，水平只有一列，並且elementUI的時間軸只有豎著的，不支援橫向，最後只能含淚自己實現了，沒想到還可以，只是如果資料很多翻頁還沒實現，有實現過這種的掘友可以艾特我一下。

一、實現元件timelineH.vue

timelineH.vue中的H代表橫，起名字煩惱，哈哈。

<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 () {
 http://www.cppcns.com
 
           return {
                liWidth: 496,//整個li的寬度，要和下面的li樣式統一
                liHalf: 2www.cppcns.com48,//這裡是li一半的寬度，使中間橫線上的點可以找到準確的位置
            }
        }
    }
</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: 24http://www.cppcns.com
 
8px;
        border-bottom: 0;
        top: 115px;
    }
    .timeline_dot {
        width: 10px;
        height: 11px;
     QehMqb   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>

實現思路：

• 豎線的實現，通過li設定左邊框實現，這裡主要是要吧每第二個li放到前一個li的中間去，所以要設定li整個寬度的一半用絕對定位left實現，距離頂部的距離也要計算好。
• 每個時間點的方塊通過絕對定位實現，需要注意的是上面列的節點和下面列的節點距離top是不一樣的，所以我用了的:nth-child(2n)實現每第二個li的top距離。
• 最後就是日期節點文字，也是判斷li的奇偶數設定不同的top值
• 因為沒有翻頁功能，所以li的長度要做適配或者資料量多要把li的寬度減少，不然資料量多就很不好看，暫時沒有優化，但是如果是適應膝上型電腦還是可以通過修改li的寬度和lihalf來實現。

二、呼叫元件

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

：

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;
}

好啦，這就實現了水平兩列的時間軸了，可以把程式碼複製下來直接用（使用CV大法吧~）。當時弄了兩天，參考了elementui的縱向時間軸的畫法，沒有做出來，又用純div和css實現也沒有成功，主要是兩列的豎線不知道該怎麼畫，還有節點，最後想起用li直接加個邊框實現。

到此這篇關於vue實現兩列水平時間軸的示例程式碼的文章就介紹到這了,更多相關vue 兩列水平時間軸內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後http://www.cppcns.com多多支援我們！