vue实现步骤条效果

使用Vue实现步骤条效果

基础步骤条实现

通过v-for动态渲染步骤项，结合CSS样式控制进度条和步骤状态：

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

<script>
export default {
  data() {
    return {
      currentStep: 1,
      steps: [
        { label: '第一步' },
        { label: '第二步' },
        { label: '第三步' }
      ]
    }
  },
  computed: {
    progressStyle() {
      return {
        width: `${(this.currentStep / (this.steps.length - 1)) * 100}%`
      }
    }
  }
}
</script>

<style scoped>
.steps-container {
  width: 100%;
  padding: 20px;
}

.steps {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.step.active .step-circle {
  background: #4CAF50;
}

.step-label {
  margin-top: 8px;
}

.progress-bar {
  position: absolute;
  height: 4px;
  background: #4CAF50;
  top: 15px;
  left: 0;
  transition: width 0.3s;
}
</style>

垂直步骤条实现

修改CSS布局实现垂直方向展示：

<template>
  <div class="vertical-steps">
    <div 
      v-for="(step, index) in steps" 
      :key="index"
      :class="['step', { 'active': currentStep >= index }]"
    >
      <div class="step-circle">{{ index + 1 }}</div>
      <div class="step-content">
        <div class="step-title">{{ step.title }}</div>
        <div class="step-desc">{{ step.desc }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.vertical-steps {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.step {
  display: flex;
  position: relative;
  padding-bottom: 20px;
}

.step-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e0e0e0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 16px;
  flex-shrink: 0;
}

.step.active .step-circle {
  background: #2196F3;
}

.step-content {
  padding-bottom: 16px;
}

.step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 12px;
  top: 24px;
  height: calc(100% - 24px);
  width: 2px;
  background: #e0e0e0;
}

.step.active:not(:last-child)::after {
  background: #2196F3;
}
</style>

使用第三方库

推荐使用vue-step-wizard等现成组件库快速实现：

npm install vue-step-wizard

<template>
  <div>
    <step-wizard :active="currentStep">
      <step title="个人信息">
        <!-- 第一步内容 -->
      </step>
      <step title="支付信息">
        <!-- 第二步内容 -->
      </step>
      <step title="确认订单">
        <!-- 第三步内容 -->
      </step>
    </step-wizard>
    <button @click="currentStep--" :disabled="currentStep <= 0">上一步</button>
    <button @click="currentStep++" :disabled="currentStep >= 2">下一步</button>
  </div>
</template>

<script>
import { StepWizard, Step } from 'vue-step-wizard'

export default {
  components: { StepWizard, Step },
  data() {
    return {
      currentStep: 0
    }
  }
}
</script>

动态步骤控制

实现步骤的导航控制和验证逻辑：

methods: {
  nextStep() {
    if (this.validateCurrentStep()) {
      this.currentStep++
    }
  },
  prevStep() {
    this.currentStep--
  },
  validateCurrentStep() {
    switch(this.currentStep) {
      case 0: return this.validatePersonalInfo()
      case 1: return this.validatePayment()
      default: return true
    }
  }
}

响应式设计

添加媒体查询确保在小屏幕上正常显示：

@media (max-width: 768px) {
  .steps {
    flex-direction: column;
    align-items: flex-start;
  }
  .progress-bar {
    width: 4px !important;
    height: 100%;
    left: 15px;
    top: 0;
  }
  .step {
    margin-bottom: 20px;
    flex-direction: row;
  }
}