一聚教程网:一个值得你收藏的教程网站

热门教程

vue实现两列水平时间轴代码示例

时间:2022-06-29 02:06:14 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下vue实现两列水平时间轴代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

具体如下:

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

一、实现组件timelineH.vue

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




实现思路:

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

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

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

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

二、调用组件

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%;
        
        background-image: url('../../static/img/timelineBg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
}

热门栏目