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