@[vue实现流程步骤条)
vue实现流程步骤条
实现效果
第一步:
第二步:
第三步
代码部分
html部分
<div class="reset-steps">
<div v-for="(item, index) in step" :key="index">
<img v-if="current >= index" :src="item.imgActive" alt="">
<img v-else :src="item.img" alt="">
<span v-if="item.span" :class="current >= index+1 ? 'lineActive':''"></span>
</div>
<button type="primary" @click="nextBtn" >下一步</button>
</div>
css部分(sass)
.reset-steps{
display: flex;
justify-content: space-between;
div{
img{
width:80px;
vertical-align: middle;
}
span{
display: inline-block;
background-color: #D5DDED;
height:2px;
width:120px;
margin-left: 25px
}
}
.lineActive {
background-color: #1E4B9F;
}
}
js部分
data(){
retrun{
current: 0,
step:[
{img:"/images/reset1.png",imgActive:"/images/reset1.png",span:true},
{img:"/images/reset2-1.png",imgActive:"/images/reset2.png",span:true},
{img:"/images/reset3-1.png",imgActive:"/images/reset3.png"},
]
}
}
methods: {
// 点击下一步
nextBtn() {
this.next();
},
next() {
if (this.current === 3) {
this.current = 0;
} else {
this.current += 1;
}
}
}
总结:这里主要运用数组的索引值,定义初始值后,每点击一次重新给初始值赋值,控制图片的显示和隐藏。