vue實(shí)現(xiàn)兩列水平時(shí)間軸的示例代碼
本文主要介紹了vue實(shí)現(xiàn)兩列水平時(shí)間軸的示例代碼,分享給大家,具體如下:
先上圖,主要實(shí)現(xiàn)兩列水平時(shí)間軸,查看了很多人實(shí)現(xiàn)的,水平只有一列,并且elementUI的時(shí)間軸只有豎著的,不支持橫向,最后只能含淚自己實(shí)現(xiàn)了,沒(méi)想到還可以,只是如果數(shù)據(jù)很多翻頁(yè)還沒(méi)實(shí)現(xiàn),有實(shí)現(xiàn)過(guò)這種的掘友可以艾特我一下。
一、實(shí)現(xiàn)組件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,//整個(gè)li的寬度,要和下面的li樣式統(tǒng)一 liHalf: 248,//這里是li一半的寬度,使中間橫線上的點(diǎn)可以找到準(zhǔn)確的位置 } } } </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>
實(shí)現(xiàn)思路:
- 豎線的實(shí)現(xiàn),通過(guò)li設(shè)置左邊框?qū)崿F(xiàn),這里主要是要吧每第二個(gè)li放到前一個(gè)li的中間去,所以要設(shè)置li整個(gè)寬度的一半用絕對(duì)定位left實(shí)現(xiàn),距離頂部的距離也要計(jì)算好。
- 每個(gè)時(shí)間點(diǎn)的方塊通過(guò)絕對(duì)定位實(shí)現(xiàn),需要注意的是上面列的節(jié)點(diǎn)和下面列的節(jié)點(diǎn)距離top是不一樣的,所以我用了css的:nth-child(2n)實(shí)現(xiàn)每第二個(gè)li的top距離。
- 最后就是日期節(jié)點(diǎn)文字,也是判斷l(xiāng)i的奇偶數(shù)設(shè)置不同的top值
- 因?yàn)闆](méi)有翻頁(yè)功能,所以li的長(zhǎng)度要做適配或者數(shù)據(jù)量多要把li的寬度減少,不然數(shù)據(jù)量多就很不好看,暫時(shí)沒(méi)有優(yōu)化,但是如果是適應(yīng)筆記本電腦還是可以通過(guò)修改li的寬度和lihalf來(lái)實(shí)現(xiàn)。
二、調(diào)用組件
<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: '更文挑戰(zhàn)三十天正式開(kāi)始啦,我想要投影儀,一直想買(mǎi)的。' },{ dateTime: '2021-12', content: '就要到月底啦,新的一年開(kāi)始,新年快樂(lè),新的一年開(kāi)始,新年快樂(lè),新的一年開(kāi)始,新年快樂(lè)。' } ] } }
css:
.timelineHengContainer { width: 100%; height: 227px; background-image: url('../../static/img/timelineBg.png'); background-size: 100% 100%; background-repeat: no-repeat; }
好啦,這就實(shí)現(xiàn)了水平兩列的時(shí)間軸了,可以把代碼復(fù)制下來(lái)直接用(使用CV大法吧~)。當(dāng)時(shí)弄了兩天,參考了elementui的縱向時(shí)間軸的畫(huà)法,沒(méi)有做出來(lái),又用純div和css實(shí)現(xiàn)也沒(méi)有成功,主要是兩列的豎線不知道該怎么畫(huà),還有節(jié)點(diǎn),最后想起用li直接加個(gè)邊框?qū)崿F(xiàn)。
到此這篇關(guān)于vue實(shí)現(xiàn)兩列水平時(shí)間軸的示例代碼的文章就介紹到這了,更多相關(guān)vue 兩列水平時(shí)間軸內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue實(shí)現(xiàn)時(shí)間軸效果
- vue實(shí)現(xiàn)橫向時(shí)間軸
- Vue實(shí)現(xiàn)時(shí)間軸功能
- VUE實(shí)現(xiàn)時(shí)間軸播放組件
- vue+canvas繪制時(shí)間軸的方法
- Vue.js實(shí)現(xiàn)時(shí)間軸功能
- vue+swiper實(shí)現(xiàn)時(shí)間軸效果
- vue實(shí)現(xiàn)物流時(shí)間軸效果
- Vue時(shí)間軸 vue-light-timeline的用法說(shuō)明
- Vue實(shí)現(xiàn)可移動(dòng)水平時(shí)間軸
- element step組件在另一側(cè)加時(shí)間軸顯示
相關(guān)文章
vue+spring boot實(shí)現(xiàn)校驗(yàn)碼功能
這篇文章主要為大家詳細(xì)介紹了vue+spring boot實(shí)現(xiàn)校驗(yàn)碼功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05Vue 2.5.2下axios + express 本地請(qǐng)求404的解決方法
下面小編就為大家分享一篇Vue 2.5.2下axios + express 本地請(qǐng)求404的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02vue與django集成打包的實(shí)現(xiàn)方法
這篇文章主要介紹了vue與django集成打包的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11淺談Vue頁(yè)面級(jí)緩存解決方案feb-alive (下)
這篇文章主要介紹了淺談Vue頁(yè)面級(jí)緩存解決方案feb-alive(下),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue?使用mescroll.js框架實(shí)現(xiàn)下拉加載和上拉刷新功能
這篇文章主要介紹了vue?使用mescroll.js框架?實(shí)現(xiàn)下拉加載和上拉刷新功能,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07vue不用import直接調(diào)用實(shí)現(xiàn)接口api文件封裝
這篇文章主要為大家介紹了vue不用import直接調(diào)用實(shí)現(xiàn)接口api文件封裝,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06