Shulou(Shulou.com)06/02 Report--

This article is about how vue implements two columns of horizontal timelines. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The details are as follows:

First, the above figure, mainly to achieve two columns of horizontal timeline, looked at the realization of many people, horizontal only one column, and the elementUI timeline is only vertical, does not support horizontal, and finally can only achieve their own tears, did not expect that it is OK, but if the data a lot of page turning has not been realized, have achieved this kind of digging friends can Aite me.

1. Implement the component timelineH.vue

H in timelineH.vue stands for horizontal, name trouble, .

{{item.content}} {{item.dateTime}} export default {name: 'timelineH', props: {timelineList: {type: Array, default: []}} Data () {return {liWidth: 496 li / width of the entire li To be consistent with the following li style liHalf: 248 li liHalf / here is half the width of the li, so that the point on the middle horizontal line can find the exact location}} .timelineHengBox {color: # fff Margin: 0; padding: 026px; 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 042px;} .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;}

The idea of realization is:

The realization of the vertical bar is realized by setting the left frame of the li. The main purpose here is to put each second li in the middle of the previous li, so set half of the width of the li to be realized by absolute positioning left, and the distance from the top should also be calculated.

The square of each time point is realized by absolute positioning, and it should be noted that the distance between the nodes listed above and the nodes listed below is not the same as the top, so I used css's: nth-child (2n) to achieve the top distance of each second li.

Finally, there is the text of the date node, which is also to judge the odd and even number of li to set different top values.

Because there is no page turning function, the length of the li should be adapted or the amount of data should be reduced to reduce the width of the li, otherwise the amount of data will not look good, and it will not be optimized for the time being, but if it is to adapt to the laptop, you can still modify the width of the li and lihalf.

Second, calling components

Js:

Import timelineH from "@ / components/timelineH.vue" Components: {timelineH}, data () {return {timelineList: [{dateTime: '2021-09 mining, content:' welcome to dig, dig every day, get the ore, , welcome digging every day, get the ore, , welcome digging, digging every day, get the ore. Ha, welcome to dig the mine, dig the mine every day, get the ore, ha.' }, {dateTime: '2021-10 hours, content:' pay attention to keeping warm in winter, it's too cold in winter.' }, {dateTime: '2021-11 days, content:' Gengwen Challenge has officially begun. I want a projector. I've always wanted to buy it. }, {dateTime: '2021-12 October, content:' is coming to the end of the month, the 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;}

Well, this implements the horizontal two-column timeline, and you can copy the code and use it directly (use the CV method). At that time, I did it for two days, referring to the drawing method of the vertical timeline of elementui, but it was not done, and it was not successfully realized with pure div and css, mainly because the vertical lines of the two columns did not know how to draw, and there were nodes. Finally, I thought of adding a frame directly with li.

Thank you for reading! This is the end of the article on "how to achieve two horizontal timelines in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.