vue实现步骤条

Vue 实现步骤条的方法

在 Vue 中实现步骤条可以通过多种方式完成，以下是几种常见的方法：

使用第三方组件库

Element UI、Ant Design Vue 等流行的 Vue UI 组件库都提供了现成的步骤条组件，可以直接使用。

以 Element UI 为例：

<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>

自定义实现步骤条

如果需要完全自定义的步骤条，可以手动实现：

<template>
  <div class="steps">
    <div 
      v-for="(step, index) in steps" 
      :key="index"
      :class="['step', { 'active': currentStep === index, 'completed': currentStep > index }]"
      @click="setStep(index)"
    >
      <div class="step-circle">{{ index + 1 }}</div>
      <div class="step-title">{{ step.title }}</div>
    </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;
  position: relative;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}
.step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.step.active .step-circle {
  background: #409eff;
}
.step.completed .step-circle {
  background: #67c23a;
}
</style>

使用 CSS 伪元素实现连接线

为步骤条添加连接线可以增强视觉效果：

.steps::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  height: 2px;
  background: #ccc;
  z-index: 0;
}

.step.completed::before {
  background: #67c23a;
}

响应式步骤条

针对不同屏幕尺寸调整步骤条布局：

@media (max-width: 768px) {
  .steps {
    flex-direction: column;
    align-items: flex-start;
  }
  .step {
    flex-direction: row;
    margin-bottom: 10px;
  }
  .step-title {
    margin-left: 10px;
  }
}

动态步骤内容

根据当前步骤显示不同的内容区域：

<template>
  <div>
    <!-- 步骤条 -->
    <div class="steps">...</div>

    <!-- 内容区域 -->
    <div class="step-content">
      <div v-if="currentStep === 0">第一步内容</div>
      <div v-if="currentStep === 1">第二步内容</div>
      <div v-if="currentStep === 2">第三步内容</div>
    </div>

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

以上方法可以根据项目需求进行组合和调整，实现功能完善且美观的步骤条组件。