持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

前言

最近突然安排我做公司的官网，说什么要把公司的轻量化引擎推广出去，于是给了我一个礼拜的时间让我把官网做出来，如果不算周末的话，准确的来讲是不到五天时间。期间还有页面评审会，就出了三张图，开了三小时的会，确定下来我就开始着手先开发。从只有三张UI图开始，我边做他们边出图。

三张图，五天，一个奇迹

不吐槽了，说说问题吧，在关于公司的那个页面有个时间轴，我决定用饿了么的 steps 来做。从这样：

到这样：

开始

这个主要用到了插槽这个属性，以前用的不多，最近才发现这个是真的香啊！！！

图标、标题、描述文字都可以自定义，这不就完美解决了所有问题吗。

上代码：

                <div class="progress">
                    <el-steps :space="200" align-center direction="vertical" :active="1">
                        <el-step v-for="item in steps" status="wait">
                            <img class="progress_icon" src="../../static/images/Dot.png" alt="" slot="icon">
                            <div class="progress_title" slot="title">{{ item.title }}</div>
                            <div class="progress_desc" slot="description"><span class="head">{{ item.text }}</span>{{
                                item.description
                            }}</div>
                        </el-step>
                    </el-steps>
                </div>

可是这时候才发现，描述文字一直是在标题的下面，这不符合我们的要求，于是打开 F12 查看。

这一查我发现了问题，这个 steps 组件的结构是这样的：

icon 和 line 在同一个div下面

title 和 description 在同一个div下

这就又好办了，将 el-step__main 修改他的默认样式，调整 title 和 description 的布局；再修改一下 el-step__line 的默认样式，修改 line 的长度就可以实现了。

/deep/.el-step.is-vertical {
    .el-step__main {
        display: flex;
    }

    .el-step__line {
        top: 40px;
        bottom: 20px;
    }
}

line 的 top 和 bottom 数值使自己慢慢试出来的，flex布局YYDS！

这已经和我要的很接近了，再稍微调整一下间距，给 title 和 description 设置一些 margin 值就好了

如何将el-steps修改成时间轴

前言

开始

猜你喜欢