elementUI步骤条:CSS改变步骤条状态样式,进度条跟随到当前步骤,而不是当前步骤完成了才显示颜色。
程序员文章站
2022-03-04 10:57:26
...
elementUI 步骤条:https://element.eleme.cn/#/zh-CN/component/steps
状态改变进度条显示:
elementUI步骤条原本的进度条显示是步骤2完成了,1和2之间的进度条才显示。
本CSS改成:走到步骤2,1和2之间的进度条就显示。
效果:
代码:elementUI步骤条组件的代码,只改了CSS。
<template>
<div class="about">
<h1>CSS改造elementUI 步骤条样式</h1>
<div class="theSteps">
<el-steps :active="active" finish-status="success">
<el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step>
<el-step title="步骤 3"></el-step>
</el-steps>
<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
active: 0,
};
},
methods: {
next() {
if (this.active++ > 2) this.active = 0;
},
},
};
</script>
<style scoped>
.theSteps {
width: 1000px;
}
/* 进行中状态:圈线 */
.theSteps >>> .el-step__head.is-process {
color: #efa73b;
border-color: #efa73b;
}
/* 进行中状态:圈内 */
.theSteps >>> .el-step__head.is-process > .el-step__icon {
background: #efa73b;
color: #fff;
}
/* 进行中状态:title(文字) */
.theSteps >>> .el-step__title.is-process {
color: #efa73b;
}
/* 完成状态:圈线 */
.theSteps >>> .el-step__head.is-success {
color: #efa73b;
border-color: #efa73b;
}
/* 完成状态:title(文字) */
.theSteps >>> .el-step__title.is-success {
color: #efa73b;
}
/* 完成状态:line
* 描述:第一步完成,第二步进行时,之间的进度条有颜色
*/
.theSteps
>>> .el-step__head.is-success
> .el-step__line
> .el-step__line-inner {
width: 100% !important;
border-width: 1px !important;
}
</style>
下一篇: java8 Optional类详解