手捋ant design的Steps 步骤条

因后台使用的是elementUI，领导要求改版，设计师根据design设计的，故产生了这个需求，这两个ui的步骤组件不太一样。

创建组件，props传入current和stepItem

<template>
  <div class="step-container">
    
  </div>
</template>

<script>
export default {
  name: 'lw-step',
  data() {
    return {
    };
  },
  props: {
    current: Number,
    stepItem: Array//['第一步','第二步','第三步']
  },
}
</script>

构建结构，并书写样式

...
<template>
  <div class="step-container">
    <div class="step" v-for="(item, index) in stepItem" :key="index">
      <div class="step-content">
        <div class="round">{{ index+1 }}</div>
        <span class="step-text">{{ item }}</span>
      </div>
    </div>
  </div>
</template>
...
//scss部分
$un-active:#D3D3D3;
$active-bg:#002FA7;
.step-container{
  display: flex;
  font-size: 14px;
  justify-content: space-around;
  .step{
    display: flex;
    align-items: center;
    overflow: hidden;
    flex: 1;
    .round{
      border: 1px solid $un-active;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      color: $un-active;
    }
    .step-text{
      color: $un-active;
      padding: 0 10px;
    }
    .step-content{
      display: flex;
      position: relative;
      align-items: center;
      padding-left: 10px;
      &::after{
        position: absolute;
        top: 16px;
        display: block;
        margin-left: 100%;
        width: 9999px;
        height: 1px;
        background: rgba(5, 5, 5, 0.06);
        content: "";
      }
    }
  }
  .step:last-child{
    flex: none;
  }
}

这里有个点关于伪类画横线这个，我看ant使用的是inset-inline-start:100%,这个属性就是设置起始点在元素最右边，不过兼容不太好，我的解决办法是，给他套一层设置一个margin-left：100%

根据传入的current，判断要展示的内容

这里有三种状态，默认，before、now。上代码吧

<template>
  <div class="step-container">
    <div class="step" v-for="(item, index) in stepItem" :key="index">
      <div :class="'step-content '+handelClassName(index)">
        <div class="round">{{ handelClassName(index)=='before'?'✔':(index+1) }}</div>
        <span class="step-text">{{ item }}</span>
      </div>
    </div>
  </div>
</template>

...
 methods: {
    handelClassName(index){
      if(index < this.current)return 'before'
      if(index === this.current)return 'now'
    }
  },
...

//scss
.step-container{
    .step{
        .before{
          .round{
            color: $active-bg;
            border: 1px solid $active-bg;
          }
          &::after{
            background: $active-bg;
          }
        }
        .now {
          .round{
            color: #fff;
            background-color: $active-bg;

          }
          &::after{
            background: $active-bg;
          }
        }
    }
}

ok 一个简易的步骤条就弄完了，不知道源码怎么写的，这样吧，记录下