@[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;
      }
    }
  }

总结：这里主要运用数组的索引值，定义初始值后，每点击一次重新给初始值赋值，控制图片的显示和隐藏。