element step组件在另一侧加时间轴显示

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

本文主要介绍了element step组件在另一侧加时间轴显示，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

这是我开发的时候遇到的一个问题：项目需要在步骤条（竖直方向）的另一侧加时间显示，但是我在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`}"

index --- 遍历出来的每个时间轴数据的下标
300 --- 整个step组件的高度（可以根据自己需要进行调整），
46 --- 是因为我设置了padding-bottom为46，所以减去这个值，
detailContent.handle_list --- 时间轴数组，

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

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

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

到此这篇关于element step组件在另一侧加时间轴显示的文章就介绍到这了,更多相关element 时间轴显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

uniapp开发打包成H5部署到服务器的详细步骤
前端使用uniapp开发项目完成后，需要将页面打包，生成H5的静态文件，部署在服务器上这样通过服务器链接地址，直接可以在手机上点开来访问，下面小编给大家讲解uniapp开发打包成H5部署到服务器的步骤，感兴趣的朋友一起看看吧
2022-11-11
Vue关闭eslint检测的多种方式
在开发项目时遇到由于选择了eslint导致的严格错误提示,如多个空格和多行报错,解决方案包括在webpack.base.conf.js中进行配置修改,创建项目时避免选择eslint,本文给大家介绍了Vue关闭eslint检测的多种方法,需要的朋友可以参考下
2025-03-03
vue中axios解决跨域问题和拦截器的使用方法
下面小编就为大家分享一篇vue中axios解决跨域问题和拦截器的使用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue函数式组件专篇深入分析
Vue提供了一种称为函数式组件的组件类型,用来定义那些没有响应数据,也不需要有任何生命周期的场景,它只接受一些props来显示组件,下面这篇文章主要给大家介绍了关于Vue高级组件之函数式组件的使用场景与源码分析的相关资料,需要的朋友可以参考下
2023-01-01
如何用vue封装axios请求
对axios进行封装以及将API接口按业务模块统一管理，有助于我们简化代码，方便后期维护。本文介绍了如何用vue封装axios请求，感兴趣的同学，可以参考下。
2021-06-06
vue如何修改data中数据问题
这篇文章主要介绍了vue如何修改data中数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue动态组件和keep-alive组件实例详解
动态组件指的是动态切换组件的显示与隐藏,下面这篇文章主要给大家介绍了关于Vue动态组件和keep-alive组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-05-05
Thymeleaf + Vue组件化开发方式
这篇文章主要介绍了Thymeleaf + Vue组件化开发方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
Vue登录页面的动态粒子背景插件实现
本文主要介绍了Vue登录页面的动态粒子背景插件实现，将登录组件背景设置为 "粒子背景"，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-07-07
Vue 绑定style和class样式的写法
class 与 style 绑定就是专门用来实现动态样式效果的技术,如果需要动态绑定 class 或 style 样式,可以使用 v-bind 绑定,本文给大家讲解Vue 绑定style和class样式,感兴趣的朋友一起看看吧
2023-10-10

element step组件在另一侧加时间轴显示

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具