vue步骤进度如何实现

Vue 步骤进度实现方法

使用第三方库（如 Element UI）

安装 Element UI：

npm install element-ui

引入并注册组件：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

在模板中使用 Steps 组件：

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

通过 active 属性控制当前步骤：

data() {
  return {
    activeStep: 0
  }
}

自定义实现步骤进度条

定义步骤数据：

data() {
  return {
    steps: ['步骤1', '步骤2', '步骤3'],
    currentStep: 0
  }
}

渲染步骤列表：

<div class="steps-container">
  <div 
    v-for="(step, index) in steps" 
    :key="index" 
    class="step-item" 
    :class="{ 'active': index === currentStep, 'completed': index < currentStep }"
  >
    {{ step }}
  </div>
</div>

添加样式：

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

.step-item {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.active {
  background-color: #409EFF;
  color: white;
}

.completed {
  background-color: #67C23A;
  color: white;
}

动态控制步骤

添加导航按钮：

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

实现导航方法：

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

带连接线的步骤条

添加连接线样式：

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

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

.completed::after {
  background-color: #67C23A;
}

响应式步骤条

添加媒体查询：

@media (max-width: 768px) {
  .steps-container {
    flex-direction: column;
  }

  .step-item:not(:last-child)::after {
    top: 100%;
    left: 50%;
    width: 1px;
    height: 20px;
    right: auto;
  }
}