vue elementui 修改步骤条el-steps的样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue elementui 修改步骤条el-steps的样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

感觉以后可能还会用到，在此记录一下

场景：

elementui原有的样式：

vue步骤条样式修改,css,前端,vue.js,javascript,css,elementui

目标样式：

vue步骤条样式修改,css,前端,vue.js,javascript,css,elementui

文章来源地址https://www.toymoban.com/news/detail-562649.html

实现：

html代码：

多加了个居中属性：align-center

<el-steps :active="active" class="steps" align-center finish-status="success">
  <el-step title="注册帐号"></el-step>
  <el-step title="资料完善" @click.native="handleStep(1)"></el-step>
  <el-step title="资料审核" @click.native="handleStep(2)"></el-step>
</el-steps>

css代码：

<style lang="less" scoped>
@publicColor: #018736;
@publicHeight: 35px;
    .steps {
      width: 80%;
      margin: 20px auto 0;
      height: @publicHeight;
      ::v-deep .el-step{
        height: 100%;
        .el-step__line{
          background-color: rgba(0,0,0,0.15);
          margin-right: 30px !important;
          margin-left: 105px !important;
          top: 50%;
          height: 1px;
        }
        .el-step__icon{
          width: @publicHeight;
          height: @publicHeight;
          font-size: 16px;
          border: 1px solid;
          .el-step__icon-inner{
            font-weight: unset !important;
          }
        }
        .el-step__head.is-process{
          color: @publicColor;
          border-color: @publicColor;
        }
        .el-step__head.is-success{
          color: @publicColor;
          border-color: @publicColor;
        }
        .is-process .el-step__icon.is-text{
          background: @publicColor;
          color: #fff;
        }
        .el-step__title.is-process{
          color: @publicColor;
        }
        .el-step__title.is-success{
          color: #565656;
        }
        .el-step__title{
          position: absolute;
          top: calc((100% - @publicHeight)/2);
          left: calc(50% + 25px);
        }
      }
    }
</style>

ok啦，如果有更优的方法，再优化

到了这里，关于vue elementui 修改步骤条el-steps的样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！