vue编写步骤条组件

 

<template>
  <div class="step-wrapper">
    <!-- 步骤条盒子 -->
    <div class="step-title-wrapper" v-for="(item,index) in stepList">
      <span class="el-icon-circle-check" v-if="item.success"></span>
      <span :class="['step-number', {'activeNumber':activeIndex === index}]" v-else>{{item.stepIndex}}</span>
      <span :class="['step-title', {'activeTitle':activeIndex === index}, {'successTitle': item.success}]">{{ item.title }}</span>
      <span :class="['line-step', {'success-line': item.success}]" v-if="stepList.length - 1 > index"></span>
    </div>
<!--    <button @click="lastStep">上一个</button>-->
<!--    <button @click="nextStep">下一个</button>-->

  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    stepList: { //步骤条步数
      type: Array,
      default: []
    }
    // 示例
    // {
    //       stepIndex: 1,
    //       title: "基本信息",
    //       success: false
    //     },
  },
  data() {
    return {
      //当前位置
      activeIndex: 0,

    };
  },
  methods: {
    //点击下一步
    nextStep() {
        this.activeIndex += 1;
        if(this.stepList.length < this.activeIndex ) {
          this.activeIndex = 0
          this.stepList.forEach((item)=> {item.success = false})
        }
        if (this.activeIndex > 0) {
          this.stepList[this.activeIndex-1].success = true
        }
    },
    //点击上一步
    lastStep() {
      if (this.activeIndex > 0) {
        this.activeIndex -= 1;
        this.stepList[this.activeIndex].success = false
      }
    }
  }

}
</script>

<style scoped lang="less">
.step-wrapper{
  display: flex;
  margin-bottom: 40px;
}
.step-title-wrapper{
   display: flex;
  align-items: center;

  .step-number{
    box-sizing: border-box;
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #00000047;
    color: #00000047;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
  }

  .activeNumber{
    border: none;
    background: #18A0FB;
    color: #fff;
  }
  .el-icon-circle-check{
     color: #18A0FB;
     font-size: 24px;
  }
  .step-title{
    margin-left: 12px;
    font-size: 14px;
    color: #00000047;
  }
  .activeTitle{
     color: #000000D8;
  }
  .successTitle{
     color: #18A0FB;
  }
  .line-step{
    width: 180px;
    height: 2px;
    display: inline-block;
    background: #E5E5E5;
    margin-left: 18px;
    margin-right: 10px;
  }
  .success-line{
     background: #18A0FB;
  }
}
</style>