自己画一个步骤条Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情 1.需求由于组件中没有合

Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情

1.需求

由于组件中没有合适这样的项目需求，那么就决定自己动手写一个应用到项目中去。

2.初画模型

<div class="step-status">
  <div>
    <div class="checkbox"></div>
    <div class="step-number">1</div>
  </div>
  <div class="step-title">任务</div>
  <div class="line"></div>
</div>

我们先描画好一开始我们需要的模型效果，然后再开始改造封装成我们需要的模式组件。就这样我们就有了第一个了。

3.封装成组件使用模式

props: {
  stepsList: {
    type: Array,
    default: () => []
  },
  currentStep: {
    type: [Number, String],
    default: 0
  }
}

这样通过值的传递处理，可以使得在项目中公共使用，应用到项目的每一块中去。

4.最后优化的成果

<div class="step-status" v-for="(item,index) in stepsList" :key="index">
  <div>
    <div class="checkbox" v-if="currentStep > index"></div>
    <div class="step-number" v-else>{{index + 1}}</div>
  </div>
  <div class="step-title">{{item.title}}</div>
  <div class="line" v-if="index !== stepsList.length - 1" :class="currentStep > index ? 'success-line' : ''"></div>
</div>

通过循环遍历的方式把数据和值渲染到界面中去，这样不仅代码简洁明了，也可以更好的复用。最后就达到了项目中需求的效果了。

5.最后的附言

这是我根据项目的需求自己编写的一个组件，其实按照UI组件中的效果，我们还可以再优化，加入描述等效果；还有√的效果，我们可以通过css实现，也可以通过图片的展示替换。有兴趣的小伙伴们可以自己动手添加实现一下。组件虽然简单，但是我发现项目中使用的步骤条组件基本是这种效果，所以我编写一个和大家分享，如果对你有帮助，麻烦按上你的小心心❤️，谢谢。