vue步骤条如何实现

实现 Vue 步骤条的方法

使用 el-steps 组件（Element UI）

安装 Element UI 后，可以直接使用 el-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: 1
    }
  }
}
</script>

自定义步骤条样式

可以通过 CSS 覆盖默认样式来自定义步骤条的外观：

.el-step__head.is-process {
  color: #409EFF;
  border-color: #409EFF;
}
.el-step__title.is-process {
  font-weight: bold;
}

使用 Vuetify 的步骤组件

如果使用 Vuetify，可以通过 v-stepper 组件实现：

<template>
  <v-stepper v-model="e1">
    <v-stepper-header>
      <v-stepper-step :complete="e1 > 1" step="1">第一步</v-stepper-step>
      <v-stepper-step :complete="e1 > 2" step="2">第二步</v-stepper-step>
      <v-stepper-step step="3">第三步</v-stepper-step>
    </v-stepper-header>
  </v-stepper>
</template>

<script>
export default {
  data() {
    return {
      e1: 1
    }
  }
}
</script>

纯 Vue 实现步骤条

不使用 UI 框架时，可以手动实现：

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

<script>
export default {
  data() {
    return {
      currentStep: 0,
      steps: [
        { title: '第一步' },
        { title: '第二步' },
        { title: '第三步' }
      ]
    }
  },
  methods: {
    setStep(index) {
      this.currentStep = index
    }
  }
}
</script>

<style>
.steps {
  display: flex;
  justify-content: space-between;
}
.step {
  padding: 10px;
  cursor: pointer;
}
.step.active {
  color: blue;
  font-weight: bold;
}
.step.completed {
  color: green;
}
</style>

响应式步骤条

可以通过计算属性动态调整步骤条：

computed: {
  progressPercentage() {
    return ((this.currentStep + 1) / this.steps.length) * 100
  }
}

然后在模板中使用：

<div class="progress-bar">
  <div class="progress" :style="{ width: progressPercentage + '%' }"></div>
</div>

步骤条与路由结合

将步骤条与 Vue Router 结合：

{
  path: '/step1',
  component: Step1,
  meta: { step: 0 }
},
{
  path: '/step2',
  component: Step2,
  meta: { step: 1 }
}

在步骤条组件中：

computed: {
  currentStep() {
    return this.$route.meta.step || 0
  }
}