【实用】零依赖组件和图片,vue&css实现带交互的步骤条UI组件

前言

在前端开发中，步骤条是一个常见且非常有用的UI组件，用于展示一系列步骤的执行进度。本文将带你一步步实现这个组件，从基础到完整功能。原创不易 jym点个赞吧！

步骤条编码思路

1.步骤条相关定义

• stepArr步骤条内容数组
• stepActiveIndex用于记录步骤条激活节点的标志,初始化为：0 即第一个节点

  stepActiveIndex:0, 
  stepArr:[
    { 
      title:'Step1',
      desc:'创建产品', 
    },{ 
      title:'Step2',
      desc:'维护模块', 
    },{ 
      title:'Step3',
      desc:'维护计划', 
    },{ 
      title:'Step4',
      desc:'创建发布', 
    }
  ]

2.步骤条节点样式定义

• .easy-step-item步骤条节点默认状态样式
• .easy-step-active步骤条节点当前激活状态样式
• .easy-step-done步骤条节点已完成状态样式

• stepActiveIndex等于index激活 .easy-step-active 即：步骤条该节点置为当前激活状态
• stepActiveIndex大于index激活 .easy-step-done 即：激活状态节点前的节点置为已完成状态

 <div  
    :class="{
     'easy-step-item':true,
     'easy-step-active':stepActiveIndex==index,
     'easy-step-done':stepActiveIndex>=index,
    }"
    :style="{
      '--stepColorR': stepActiveIndex==index?'#bd0000':'#f5f5f5',
      '--stepColorL': stepActiveIndex==index?'#ff6b21':'#fff'
    }"
    v-for="(i,index) in stepArr" 
    :key="index">
 </div>   

3.步骤条上一步/下一步切换

<!-- btn start -->
<div class="easy-content-bottom">
  <div 
   :class="{'step-btn-box':true,'step-btn-disabled':stepActiveIndex==0}"
   @click="doPrev">
   上一步
  </div>
  <div class="step-btn-box" 
    v-if="stepActiveIndex < stepArr.length-1" 
    @click="doNext">
    下一步
   </div>
  <div 
    class="step-btn-box" 
    v-if="stepActiveIndex == stepArr.length-1">
    完成
   </div>
</div>
<!-- btn end -->

// 步骤条下一步
doNext(){
  if(this.stepActiveIndex<this.stepArr.length-1){ 
    this.stepActiveIndex++
    this.getStepData()
  }
}
// 步骤条上一步
doPrev(){
  if(this.stepActiveIndex>0){ 
    this.stepActiveIndex--
    this.getStepData()
  }
}
// 获取步骤条节点信息
getStepData(){ 
  const obj = this.stepArr[this.stepActiveIndex]
  this.stepData = obj 
}

‌在线Demo查看完成代码

总结

demo还有很大的优化空间和高效简单的实现方式，本文旨在抛砖引玉，请大佬们见谅！
如果能帮助到jym们 欢迎大家点赞加收藏