vue实现步骤条功能

Vue 实现步骤条功能

使用 Element UI 的 Steps 组件

Element UI 提供了现成的 Steps 组件，可以快速实现步骤条功能。安装 Element UI 后，直接在模板中使用 el-steps 和 el-step 组件。

<template>
  <el-steps :active="active" finish-status="success">
    <el-step title="步骤1" description="描述信息"></el-step>
    <el-step title="步骤2" description="描述信息"></el-step>
    <el-step title="步骤3" description="描述信息"></el-step>
  </el-steps>
  <el-button @click="next">下一步</el-button>
</template>

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

自定义步骤条组件

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

<template>
  <div class="steps">
    <div 
      v-for="(step, index) in steps" 
      :key="index" 
      :class="['step', { 'active': index === currentStep, 'completed': index < currentStep }]"
    >
      <div class="step-circle">{{ index + 1 }}</div>
      <div class="step-title">{{ step.title }}</div>
    </div>
  </div>
  <button @click="goNext">下一步</button>
</template>

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

<style>
.steps {
  display: flex;
  justify-content: space-between;
}
.step {
  text-align: center;
  flex: 1;
}
.step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ccc;
  margin: 0 auto;
  line-height: 30px;
}
.step.active .step-circle {
  background: #409eff;
}
.step.completed .step-circle {
  background: #67c23a;
}
</style>

结合路由实现步骤导航

步骤条可以与 Vue Router 结合，实现路由跳转。每个步骤对应一个路由，通过导航守卫控制步骤的切换。

const routes = [
  { path: '/step1', component: Step1 },
  { path: '/step2', component: Step2 },
  { path: '/step3', component: Step3 }
]

router.beforeEach((to, from, next) => {
  const steps = ['/step1', '/step2', '/step3']
  const currentStep = steps.indexOf(to.path)
  const prevStep = steps.indexOf(from.path)

  if (currentStep > prevStep + 1) {
    next(false) // 阻止跳转
  } else {
    next()
  }
})

动态步骤条

对于动态步骤条，可以根据数据动态生成步骤。通过 v-for 遍历步骤数据，动态渲染步骤条。

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

<script>
export default {
  data() {
    return {
      dynamicSteps: [],
      currentDynamicStep: 0
    }
  },
  created() {
    this.fetchSteps()
  },
  methods: {
    fetchSteps() {
      // 模拟异步获取步骤数据
      setTimeout(() => {
        this.dynamicSteps = [
          { name: '动态步骤1' },
          { name: '动态步骤2' },
          { name: '动态步骤3' }
        ]
      }, 500)
    }
  }
}
</script>