element-ui时间线样式修改
element-ui时间线样式修改
前两天公司给了一个需求 要求如下图所示
需求是时间在步骤条左边,看了element-ui的文档 发现并没有参数可以设置时间在步骤条的左边 那没办法 只能自己想一想办法了
首先想到的是用样式直接改变 活不多说 直接搞
第一步
选中时间这个元素 发现了这个类样式
在控制台里看一下
第二步
我们尝试修改一下 加个定位试一试
第三步
加完之后发现 有效果 我们把top跟left的值修改一下 调整到合适的位置
第四步
因为我这个是一个弹框 发现修改完之后时间已经超出了这个弹框 肯定是不行的 我们要想办法让时间显示在弹框内
通过审查元素我们发现element-ui的时间线是用ul编写的 同时发现了这个类样式
我们修改一下这个类样式 让他的左边内边距大一点
ok 通过修改这个类样式我们实现了我们的需求
然后我们就要把在控制台修改的样式编写到我们的项目里就可以了
第五步
::v-deep .el-timeline-item__timestamp.is-bottom {
position: absolute;
left: -117px;
top: -3px;
color: #333333;
}
::v-deep .el-timeline {
padding-left: 150px;
}
一定要写在scoped里面 不然会影响全局的样式
我这里用的是scss 如果用less的朋友 可以用/deep/的方法深度改变样式
/deep/.el-timeline-item__timestamp.is-top {
position: absolute;
left: -117px;
top: -3px;
color: #333333;
}
/deep/.el-timeline {
padding-left: 150px;
}
保存一下 刷新页面 ok 我们的样式需求就完成了
————————————————
版权声明：本文为CSDN博主「良仔是个前端」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lwllwl_/article/details/106209495
喜欢的朋友记得点赞、收藏、关注哦！！！