当前位置：首页 > VUE

vue实现steps步骤条

2026-01-21 22:50:26VUE

实现步骤条的基本结构

在Vue中实现步骤条可以通过组件化的方式构建。创建一个Steps组件，包含多个Step子组件，通过v-for动态渲染步骤项。基本结构如下：

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

数据驱动步骤状态

通过currentStep和steps数据控制步骤状态。currentStep表示当前激活的步骤索引，steps数组存储步骤信息：

export default {
  data() {
    return {
      currentStep: 0,
      steps: [
        { title: '第一步' },
        { title: '第二步' },
        { title: '第三步' }
      ]
    }
  }
}

样式设计与状态反馈

使用CSS为步骤条添加视觉反馈，通过类名控制不同状态下的样式：

.steps {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
}

.step {
  flex: 1;
  text-align: center;
  position: relative;
}

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

.step.active .step-circle {
  background: #42b983;
}

.step.completed .step-circle {
  background: #42b983;
}

.step-title {
  color: #999;
}

.step.active .step-title {
  color: #42b983;
}

添加连接线效果

在步骤之间添加连接线增强视觉连续性：

.step:not(:last-child):after {
  content: '';
  position: absolute;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #ccc;
  z-index: -1;
}

.step.active:not(:last-child):after,
.step.completed:not(:last-child):after {
  background: #42b983;
}

动态控制步骤进度

通过方法控制步骤前进或后退：

methods: {
  nextStep() {
    if (this.currentStep < this.steps.length - 1) {
      this.currentStep++
    }
  },
  prevStep() {
    if (this.currentStep > 0) {
      this.currentStep--
    }
  }
}

完整组件示例

整合以上代码的完整组件实现：

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

    <div class="step-content">
      {{ steps[currentStep].content }}
    </div>

    <button @click="prevStep" :disabled="currentStep === 0">上一步</button>
    <button @click="nextStep" :disabled="currentStep === steps.length - 1">下一步</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 0,
      steps: [
        { title: '第一步', content: '第一步的内容' },
        { title: '第二步', content: '第二步的内容' },
        { title: '第三步', content: '第三步的内容' }
      ]
    }
  },
  methods: {
    nextStep() {
      if (this.currentStep < this.steps.length - 1) {
        this.currentStep++
      }
    },
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--
      }
    }
  }
}
</script>

<style>
/* 添加上述CSS样式 */
</style>