这篇文章给大家分享的是“基于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 () {
            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框架怎样实现水平时间轴，思路及方法是什么”的文章就介绍到这了,更多相关的内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS树状结构数据的增删改查处理操作是什么

  本篇文章给大家带来了关于javascript的相关知识，其中主要整理了处理树状结构数据的增删改查的相关问题，相比普通的数组结构数据，树状结构的处理就没有数组那么的直观，但是也没那么复杂，需要多一步递归查找来对数据进行深度遍历操作，下面一起来看一下，希望对大家有帮助。

• e框架中如何用递归方式做侧边栏导航？

  这篇文章主要介绍了vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• dialog模态框的封装是怎样，如何做

  这篇文章主要为大家详细介绍了Vue dialog模态框的封装方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• JavaScript类型检测方法是什么，具体怎样做

  JavaScript是web前端广泛应用的语言之一，在网页应用制作、脚本制作、小程序等诸多领域具有不可替代的的地位。笔者学习了一端时间的前端，颇感JS知识点的繁碎，故将学习到的一些知识、思考和感悟记录下来。

• 用JavaScript怎样求对数，都有哪些方法？

  这篇文章给大家分享的是用JavaScript怎样求对数的方法，文中给大家分享了四种方法，并不难理解，还有示例供大家参考，有需要的朋友可以看看，对大家学习JavaScript会有一定的帮助，接下来就跟随小编一起学习一下吧。