element-ui时间线样式修改

element-ui时间线样式修改

前两天公司给了一个需求 要求如下图所示

需求是时间在步骤条左边,看了element-ui的文档 发现并没有参数可以设置时间在步骤条的左边 那没办法 只能自己想一想办法了

首先想到的是用样式直接改变 活不多说 直接搞

第一步

选中时间这个元素 发现了这个类样式

在控制台里看一下

第二步

我们尝试修改一下 加个定位试一试

第三步

加完之后发现 有效果 我们把top跟left的值修改一下 调整到合适的位置

第四步

因为我这个是一个弹框 发现修改完之后时间已经超出了这个弹框 肯定是不行的 我们要想办法让时间显示在弹框内
通过审查元素我们发现element-ui的时间线是用ul编写的 同时发现了这个类样式

我们修改一下这个类样式 让他的左边内边距大一点

ok 通过修改这个类样式我们实现了我们的需求

然后我们就要把在控制台修改的样式编写到我们的项目里就可以了

第五步

::v-deep .el-timeline-item__timestamp.is-top {
    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 我们的样式需求就完成了

如果哪里有问题 可以留言给我 如果你有其他方法我们也可以一起交流