当前位置：首页 > VUE

vue实现步骤条

2026-01-15 23:32:25VUE

Vue 实现步骤条的方法

使用 Element UI 的 Steps 组件

Element UI 提供了现成的 Steps 组件，可以快速实现步骤条功能。安装 Element UI 后，直接引入 Steps 组件即可。

<template>
  <el-steps :active="active" finish-status="success">
    <el-step title="步骤1"></el-step>
    <el-step title="步骤2"></el-step>
    <el-step title="步骤3"></el-step>
  </el-steps>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    }
  }
}
</script>

自定义步骤条组件

如果需要更灵活的样式或功能，可以自定义步骤条组件。通过动态绑定类名和样式来控制步骤条的显示状态。

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

<script>
export default {
  data() {
    return {
      steps: [
        { title: '步骤1' },
        { title: '步骤2' },
        { title: '步骤3' }
      ],
      currentStep: 0
    }
  }
}
</script>

<style>
.steps {
  display: flex;
  justify-content: space-between;
}
.step {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.step.active {
  background-color: #409EFF;
  color: white;
}
.step.completed {
  background-color: #67C23A;
  color: white;
}
</style>

结合路由实现步骤导航

步骤条可以与 Vue Router 结合，实现通过步骤导航切换路由的功能。每个步骤对应一个路由，点击步骤时跳转到相应路由。

<template>
  <div>
    <div class="steps">
      <router-link 
        v-for="(step, index) in steps" 
        :key="index" 
        :to="step.path"
        :class="['step', { 'active': $route.path === step.path }]"
      >
        {{ step.title }}
      </router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      steps: [
        { title: '步骤1', path: '/step1' },
        { title: '步骤2', path: '/step2' },
        { title: '步骤3', path: '/step3' }
      ]
    }
  }
}
</script>

动态控制步骤状态

通过方法动态控制步骤的状态，例如在表单验证通过后自动跳转到下一步。

<template>
  <div>
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤1"></el-step>
      <el-step title="步骤2"></el-step>
      <el-step title="步骤3"></el-step>
    </el-steps>
    <button @click="nextStep">下一步</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    }
  },
  methods: {
    nextStep() {
      if (this.active++ > 2) this.active = 0
    }
  }
}
</script>

以上方法可以根据具体需求选择使用，Element UI 的 Steps 组件适合快速实现，自定义组件适合需要高度定制化的情况。

vue实现步骤条