快捷導(dǎo)航

element step組件在另一側(cè)加時間軸顯示

更新時間：2022年06月28日 10:05:17 投稿：zx

本文主要介紹了element step組件在另一側(cè)加時間軸顯示，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

這是我開發(fā)的時候遇到的一個問題：項目需要在步驟條（豎直方向）的另一側(cè)加時間顯示，但是我在element ui 的step組件中一直沒找著設(shè)置方法，所以就自己想了個辦法加進(jìn)來，效果如下：

代碼如下，先上HTML部分：

<div class="delate-step" v-if="detailContent.handle_list.length !==0">
　　<span>處理環(huán)節(jié)：</span>
　　<div style="width: 100%; height: 300px; padding-bottom: 40px; display: table;margin-top: 10px;">
　　　　<div class="delate-step-lt">
　　　　　　<div
　　　　　　　　class="delate-time"
　　　　　　　　:style="{'top': `${index*((300-46)/(detailContent.handle_list.length-1))+4}px`}"
　　　　　　　　v-for="(item, index) in detailContent.handle_list"
　　　　　　　　:key="index"
　　　　　　　　>{{item.h_time}}</div>
　　　　　　</div>
　　　　　　<div class="delate-step-rt">
　　　　　　　　<el-steps direction="vertical" :active="delate_result">
　　　　　　　　<el-step
　　　　　　　　　　v-for="(item, index) in detailContent.handle_list"
　　　　　　　　　　:key="index"
　　　　　　　　　　:title="item.department"
　　　　　　　　　　:description="item.h_result==='null'?'':item.h_result"
　　　　　　　　></el-step>
　　　　　　</el-steps>
　　　　</div>
　　</div>
</div>

然后是css部分：

.delate-step-lt {
    width: 80px;
     color: #818181;
     font-size: 13px;
     display: table-cell;
     position: relative;
     .delate-time {
          position: absolute;
           // &:first-child {
            //   top: 4px;
            // }
            // &:nth-child(2) {
            //   top: 80px;
            // }
            // &:nth-child(3) {
            //   top: 170px;
            // }
            // &:last-child {
            //   bottom: 24px;
            // }
      }
}
.delate-step-rt {
  display: table-cell;
}

現(xiàn)在說說實現(xiàn)過程吧：

（1）首先先用一個大的div包裹在最外層，然后給它設(shè)置display：table屬性，目的是讓其下面的兩個子div等高（兩個子div需要設(shè)置display：table-cell屬性）

（2）然后將時間軸放左邊的div中，需要給這個div設(shè)置一個屬性position：relative，element ui的step組件放在右邊的div中，這樣就實現(xiàn)時間軸呈現(xiàn)在豎向step的另一側(cè)了。

（3）剩下的則是顯示位置跟step 的 title 水平顯示的問題了，先給每個顯示的時間軸設(shè)置絕對定位屬性position：absolute，一開始我想到的是使用css的偽類進(jìn)行設(shè)置，如上css部分注釋的代碼，效果還行，但是后面想到我的step步驟數(shù)量是動態(tài)的，如果步驟數(shù)量發(fā)生了變化（變多或者變少），那么css設(shè)置的樣式就沒用了，所以這條路就走到盡頭（不過若是固定步驟數(shù)量，直接這樣設(shè)置是沒問題的）；后面想起來vue的樣式綁定屬性：style，于是就有了下面的計算：

:style="{'top': `${index*((300-46)/(detailContent.handle_list.length-1))+4}px`}"

index --- 遍歷出來的每個時間軸數(shù)據(jù)的下標(biāo)
300 --- 整個step組件的高度（可以根據(jù)自己需要進(jìn)行調(diào)整），
46 --- 是因為我設(shè)置了padding-bottom為46，所以減去這個值，
detailContent.handle_list --- 時間軸數(shù)組，

4 --- 因為第一個是靠頂部顯示的，多加4px是想讓時間軸顯示的位置下沉一點

計算過程：用步驟條的顯示高度(300-46)除以detailContent.handle_list.length-1(因為第一個默認(rèn)在top：0px的位置了，所以我們只需要計算剩下的detailContent.handle_list.length-1個時間軸數(shù)據(jù)顯示的位置即可)，這樣就可以得到每個時間軸之間的間距，然后乘以每個時間軸下標(biāo)，將乘的結(jié)果設(shè)置成每個時間軸div的top值，即可讓時間軸按我們想要的結(jié)果進(jìn)行顯示了

這是我想到的一個解決方法，可能也會有些不對或者不足的地方，如果大家有什么更好的方法或者插件，可以指出來互相學(xué)習(xí)一下

到此這篇關(guān)于element step組件在另一側(cè)加時間軸顯示的文章就介紹到這了,更多相關(guān)element 時間軸顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: