element-ui steps步骤条自定义颜色

萌新之路

已于 2023-03-21 16:41:41 修改

阅读量4.8k

点赞数 6

文章标签： javascript 前端 elementui

于 2023-03-21 16:40:57 首次发布

本文链接：https://blog.csdn.net/qq_44162778/article/details/129691966

版权

文章展示了如何使用ElementUI的<el-steps>组件创建一个具有特定颜色样式的步骤条。通过设置data中的active属性控制活动步骤，并通过CSS进行详细的颜色定制，包括不同状态（开始、进行中、等待、完成、成功）的文字颜色、边框颜色和线条颜色。

摘要由CSDN通过智能技术生成

效果图：
在这里插入图片描述

页面代码：

<el-steps :active="active" class="stepsStyle">
          <el-step title="开始"></el-step>
          <el-step title="2"></el-step>
          <el-step title="3"></el-step>
          <el-step title="4"></el-step>
          <el-step title="结束"></el-step>
        </el-steps>

data数据：
data(){
	return{
		active:2
	}
},

css代码：

.stepsStyle{
   width: 100%;
   ::v-deep{

     .el-step__title.is-process,.el-step__title.is-wait{
       color: #fff !important;
     }
     .el-step__head.is-process,.el-step__heads.is-wait{
       .el-step__icon.is-text{//这里设置的是下一步和等待状态里的文字颜色
         color: #C0C4CC !important;
         border-color: #C0C4CC !important;
       }
     }
     .el-step__head.is-finish{
       color: orange !important;
       .el-step__icon.is-text{//这里设置的是已完成状态里的文字颜色
         color: orange !important;
         border-color: orange !important;
       }
     }
     .el-step__title.is-finish{
       color: orange !important;
     }
     .el-step__line-inner{//这里设置的是完成后过渡线条颜色
       border-color: orange !important;
     }
     .el-step__head.is-success,.el-step__title.is-success{//这里设置的是完成后的颜色
       color: orange !important;
     }
   }
 }