vue封装steps组件(自适应)

1. stepsModel组件

<!-- Step.vue  -->
<template>
  <div class="stepOut">
    <!-- 步骤条 -->
    <ul>
      <li class="stepItem" v-for="(stepItem, index) in stepInfo.list" :key="index">
        <!-- 圆圈  -->
        <div :class="stepInfo.step > index+1 ? 'icon old':stepInfo.step === index+1?'icon active':'icon'"></div>
        <!-- 连接线  -->
        <div :class="stepInfo.step >= index+2 ? 'line lineActive':'line'" v-show="index!==stepInfo.list.length-1"></div> 
      </li>
    </ul>
    <!-- 文字 -->
    <ul class="stepText" style="marginTop:11px">
        <li class="stepItem" v-for="(stepItem, index) in stepInfo.list" :key="index">
            <p class="textParams" :class="stepInfo.step >= index+1 ? 'activeTime':null">{{stepItem.textParams}}</p>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'steps',
  props: {
    // 传递步骤参数
    stepInfo: {
      type: Object,
      default: function () {
        return {
          list: [],
          step: 0
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
li{
    list-style: none;
}
.stepOut ul{
  width: 100%;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  .stepItem {
    display: inline-block;
    flex: 1;
    font-size: 16px;
    text-align: center;
    position: relative;
    .icon {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid rgba(0,0,0,0.09);
      margin: 0 auto;
      position: relative;
      z-index: 888;
    }
    .old{
      width: 14px;
      height: 14px;
      background-color: #04CBD8;  
      border: none;
    }
    .active {
      width: 14px;
      height: 14px;
      background-color: #fff;
      border: 2px solid #04CBD8;
    }
    .line {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateY(-50%);
      border-bottom: 2px solid rgba(0,0,0,0.04);
      width: 100%;
      z-index: 111;
    }
    .lineActive {
      border-bottom: 1px solid #04CBD8;
    }
    .textParams{
      color: #9999A4;
      font-size: 14px;
      font-weight: 400;
    }
    .activeTime{
        color:#00B8C4;
        font-weight: 500;
    }
  }
  
}
</style>

2. 父组件使用-template

<stpes-model :stepInfo="stepInfo" ></stpes-model>
<Button type="primary" @click="nextBut"> 下一步 </Button>

2. 父组件使用-data

stepInfo: {
      list: [{textParams: '标题1' },{ textParams: '标题2' },{ textParams: '标题3' },{ textParams: '标题4' }],
      step: 2
},

3. 父组件使用-components注册组件

components: {
        StpesModel,
},

4. 父组件使用-methods

nextBut() {
     if(this.stepInfo.step>3){
         this.stepInfo.step = 1
     }else{
         this.stepInfo.step++
     }
 }