這是我開發(fā)的時(shí)候遇到的一個(gè)問題：項(xiàng)目需要在步驟條（豎直方向）的另一側(cè)加時(shí)間顯示，但是我在element ui 的step組件中一直沒找著設(shè)置方法，所以就自己想了個(gè)辦法加進(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)在說說實(shí)現(xiàn)過程吧：

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

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

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

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

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

4 --- 因?yàn)榈谝粋€(gè)是靠頂部顯示的，多加4px是想讓時(shí)間軸顯示的位置下沉一點(diǎn)

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

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

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

最新評(píng)論