当前位置：首页 > VUE

vue实现步骤条效果

2026-01-21 17:52:57VUE

实现步骤条的基本结构

使用Vue的v-for指令动态渲染步骤条，结合CSS样式实现基础布局。数据通常存储在组件的data或通过props传递。

<template>
  <div class="step-container">
    <div 
      v-for="(step, index) in steps" 
      :key="index" 
      :class="['step-item', { 'active': currentStep >= index }]"
    >
      <div class="step-circle">{{ index + 1 }}</div>
      <div class="step-label">{{ step.label }}</div>
    </div>
    <div class="step-progress" :style="{ width: progressWidth }"></div>
  </div>
</template>

动态样式与进度控制

通过计算属性动态控制进度条宽度和步骤激活状态，依赖currentStep和步骤总数计算进度百分比。

export default {
  props: {
    steps: Array,
    currentStep: Number
  },
  computed: {
    progressWidth() {
      const totalSteps = this.steps.length;
      return `${(this.currentStep / (totalSteps - 1)) * 100}%`;
    }
  }
}

CSS样式设计

使用Flex布局实现水平排列，通过伪元素和过渡效果增强交互视觉。关键点包括进度条定位和步骤项的激活状态样式。

.step-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 20px 0;
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}
.step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}
.step-item.active .step-circle {
  background: #42b983;
  color: white;
}
.step-progress {
  position: absolute;
  height: 2px;
  background: #42b983;
  top: 15px;
  left: 0;
  transition: width 0.3s;
}

交互逻辑增强

添加点击事件允许用户跳转到特定步骤，需通过$emit通知父组件更新currentStep。

<div 
  class="step-item" 
  @click="$emit('step-click', index)"
  v-for="(step, index) in steps"
  <!-- 其他属性 -->
></div>

响应式调整

针对移动设备使用媒体查询调整布局，例如减小步骤间距或改为垂直排列。

@media (max-width: 768px) {
  .step-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .step-progress {
    width: 2px !important;
    height: 100%;
    left: 15px;
    top: 0;
  }
}

完整组件示例

整合上述代码的完整单文件组件示例，包含基础功能与样式。

<template>
  <div class="step-container">
    <div 
      v-for="(step, index) in steps" 
      :key="index" 
      :class="['step-item', { 'active': currentStep >= index }]"
      @click="$emit('step-click', index)"
    >
      <div class="step-circle">{{ index + 1 }}</div>
      <div class="step-label">{{ step.label }}</div>
    </div>
    <div class="step-progress" :style="{ width: progressWidth }"></div>
  </div>
</template>

<script>
export default {
  props: {
    steps: {
      type: Array,
      required: true
    },
    currentStep: {
      type: Number,
      default: 0
    }
  },
  computed: {
    progressWidth() {
      return `${(this.currentStep / (this.steps.length - 1)) * 100}%`;
    }
  }
}
</script>

<style scoped>
/* 样式部分参考前文 */
</style>

vue实现步骤条效果