第一种：
template
<div class="per-mobile-step" v-for="(item,index) in steps" :key="item.value" @click="changeStep(item,index)" :class="[ 'per-mobile-step-'+index, item.value==currentcomponent?'active':'', index < currentcomponentindex?'active':'' ]"> <div class="title-dot"> <i :class="[ item.value==currentcomponent?'active':'', index < currentcomponentindex?'actived':'' ]"></i> <div class="line" :class="[ index < currentcomponentindex?'active':'' ]" v-if="index!==3"></div> </div> <div class="title-text" :class="[ 'title-text-'+index, item.value==currentcomponent?'active':'', index < currentcomponentindex?'active':'' ]">{{item.label}}</div> </div>下面的
index < currentcomponentindex?'active':''为了记录以后步骤前的已实现的步骤，actived为已实现，active为以后展现步骤
js
data(){ return{ currentcomponent:"ac1", currentcomponentindex:0, steps:[ { label:"身份验证", value:"ac1" }, { label:"手机号绑定", value:"ac2" }, { label:"设置明码", value:"ac3" }, { label:"实现", value:"ac4" }, ] } },scss
// mobile .per-mobile-step{ flex: 3; font-size: 0.8rem; line-height: 2; color: #e2e2e2; &.per-mobile-step-3{ flex: 1;//最初一步没有线条，做了flex比例缩减 } .title-dot{ display: flex; align-items: center; >i{ height: 10px; width: 10px; background: #e6e6e6; display: block; border-radius: 50%; &.active{ background: #f39800; box-shadow: 0 0 0 3px #887963; } &.actived{ background: #f39800; box-shadow: 0 0 0 3px #f39800; } } .line{ flex: 1; height: 1px; background: #e6e6e6; &.active{ background: #f39800; } } }// 为了文字居中，包裹层向左边挪动20px// 字居中用relative做了偏移，有更好的办法代码请甩给我~ .title-text{ position: relative; margin-top: 5px; &.active{ color: #edc462; } } .title-text-0{ left: -20px; } .title-text-1{ left: -23px; } .title-text-2{ left: -20px; } .title-text-3{ left: -10px; } }第二种：
template
<div class="per-step" v-for="(item,index) in steps" :key="item.value" @click="changeStep(item,index)" :class="[ index!==0?'before-trangle':'', index!==3?'after-trangle':'', 'per-step-'+index, item.value==currentcomponent?'active':'', index < currentcomponentindex?'active':'' ]"> <span>{{item.label}}</span> </div>scss
.per-step{ flex: 1; text-align: center; background: rgba(0,0,0,.5); padding: 10px 0; margin: 0 20px; color: #fff; position: relative; height: 40px; cursor: pointer; &.active{ background: rgba(0,84,165,.5); } &.before-trangle{ margin-left: 40px; &::before{ content: " "; width: 0px; height: 0px; position: absolute; top: 0; left: -40px; border: 20px solid rgba(0,0,0,.5); border-left-color: transparent; } &.active{ &::before{ border: 20px solid rgba(0,84,165,.5); border-left-color: transparent; } } } &.after-trangle{ &::after{ content: " "; width: 0px; height: 0px; position: absolute; top: 0; right: -40px; border: 20px solid transparent; border-left-color: rgba(0,0,0,.5); } &.active{ &::after{ border: 20px solid transparent; border-left-color: rgba(0,84,165,.5); } } } &.per-step-0{ margin-left: 0; } &.per-step-3{ margin-right: 0; } }