vue如何实现两列水平时间轴

这篇文章给大家分享的是有关Vue如何实现两列水平时间轴的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

具体如下：

先上图，主要实现两列水平时间轴，查看了很多人实现的，水平只有一列，并且elementUI的时间轴只有竖着的，不支持横向，最后只能含泪自己实现了，没想到还可以，只是如果数据很多翻页还没实现，有实现过这种的掘友可以艾特我一下。

一、实现组件timelineH.vue

timelineH.vue中的H代表横，起名字烦恼，哈哈。

<template>    <ul class="timelineHengBox">        <li class="timelineHengitem" v-for="(item,index) in timelineList" :key="index"             :>            <div class="timeline_dot" :></div>            <div class="timeline_dot" v-show="index == timelineList.length - 2" ></div>            <div class="timeline_wapper flex" :class="{'mt20': index % 2 != 0}">                <img src="../../static/img/excelIcon.png" class="bjIcon" :>                <div>{{item.content}}</div>            </div>            <div class="timelineDate_bottom" :>{{item.dateTime}}</div>        </li>    </ul></template><script>    export default {        name: 'timelineH',        props: {            timelineList: {                type: Array,                default: []            }        },        data () {            return {                liWidth: 496,//整个li的宽度，要和下面的li样式统一                liHalf: 248,//这里是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: 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>

实现思路：

• 竖线的实现，通过li设置左边框实现，这里主要是要吧每第二个li放到前一个li的中间去，所以要设置li整个宽度的一半用绝对定位left实现，距离顶部的距离也要计算好。

• 每个时间点的方块通过绝对定位实现，需要注意的是上面列的节点和下面列的节点距离top是不一样的，所以我用了CSS的:nth-child(2n)实现每第二个li的top距离。

• 最后就是日期节点文字，也是判断li的奇偶数设置不同的top值

• 因为没有翻页功能，所以li的长度要做适配或者数据量多要把li的宽度减少，不然数据量多就很不好看，暂时没有优化，但是如果是适应笔记本电脑还是可以通过修改li的宽度和lihalf来实现。

二、调用组件

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

好啦，这就实现了水平两列的时间轴了，可以把代码复制下来直接用（使用CV大法吧~）。当时弄了两天，参考了elementui的纵向时间轴的画法，没有做出来，又用纯div和css实现也没有成功，主要是两列的竖线不知道该怎么画，还有节点，最后想起用li直接加个边框实现。

感谢各位的阅读！关于“vue如何实现两列水平时间轴”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！