亲宝软件园·资讯

展开

element 时间轴显示

人气:7

这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下:

 

代码如下,先上HTML部分:

<div class="delate-step" v-if="detailContent.handle_list.length !==0">
  <span>处理环节:</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;
}

现在说说实现过程吧:

(1)首先先用一个大的div包裹在最外层,然后给它设置display:table属性,目的是让其下面的两个子div等高(两个子div需要设置display:table-cell属性)

(2)然后将时间轴放左边的div中,需要给这个div设置一个属性position:relative,element ui的step组件放在右边的div中,这样就实现时间轴呈现在竖向step的另一侧了。

(3)剩下的则是显示位置跟step 的 title 水平显示的问题了,先给每个显示的时间轴设置绝对定位属性position:absolute,一开始我想到的是使用css的伪类进行设置,如上css部分注释的代码,效果还行,但是后面想到我的step步骤数量是动态的,如果步骤数量发生了变化(变多或者变少),那么css设置的样式就没用了,所以这条路就走到尽头(不过若是固定步骤数量,直接这样设置是没问题的);后面想起来vue的样式绑定属性:style,于是就有了下面的计算:

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

4 --- 因为第一个是靠顶部显示的,多加4px是想让时间轴显示的位置下沉一点

计算过程:用步骤条的显示高度(300-46)除以detailContent.handle_list.length-1(因为第一个默认在top:0px的位置了,所以我们只需要计算剩下的detailContent.handle_list.length-1个时间轴数据显示的位置即可),这样就可以得到每个时间轴之间的间距,然后乘以每个时间轴下标,将乘的结果设置成每个时间轴div的top值,即可让时间轴按我们想要的结果进行显示了

这是我想到的一个解决方法,可能也会有些不对或者不足的地方,如果大家有什么更好的方法或者插件,可以指出来互相学习一下

加载全部内容

相关教程
猜你喜欢
用户评论