vue实现步骤条样式

Vue 实现步骤条样式

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

使用第三方组件库

许多流行的 Vue UI 组件库提供了现成的步骤条组件，例如 Element UI、Ant Design Vue 和 Vuetify。

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: 0
    }
  }
}
</script>

Ant Design Vue 示例：

<template>
  <a-steps :current="current">
    <a-step title="第一步" />
    <a-step title="第二步" />
    <a-step title="第三步" />
  </a-steps>
</template>

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

自定义步骤条组件

如果需要更灵活的样式控制，可以自定义步骤条组件。

基础实现：

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

<script>
export default {
  props: {
    steps: {
      type: Array,
      required: true
    },
    currentStep: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style scoped>
.steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
}

.step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ccc;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

.step.active .step-circle {
  background-color: #409eff;
}

.step.completed .step-circle {
  background-color: #67c23a;
}

.step-line {
  position: absolute;
  top: 15px;
  left: calc(50% + 15px);
  right: calc(-50% + 15px);
  height: 2px;
  background-color: #ccc;
}

.step.completed .step-line,
.step.active .step-line {
  background-color: #67c23a;
}
</style>

使用 CSS 变量实现主题化

可以通过 CSS 变量使步骤条样式更易于定制：

<style scoped>
.steps {
  --primary-color: #409eff;
  --success-color: #67c23a;
  --inactive-color: #ccc;
  --text-color: #333;
  --step-size: 30px;
  --line-height: 2px;
}

.step-circle {
  width: var(--step-size);
  height: var(--step-size);
  background-color: var(--inactive-color);
}

.step.active .step-circle {
  background-color: var(--primary-color);
}

.step.completed .step-circle {
  background-color: var(--success-color);
}
</style>

响应式步骤条

添加响应式设计，使步骤条在小屏幕上显示更紧凑：

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

  .step {
    flex-direction: row;
    margin-bottom: 10px;
    width: 100%;
  }

  .step-line {
    display: none;
  }

  .step-title {
    margin-left: 10px;
  }
}

动画效果

为步骤条添加过渡动画提升用户体验：

.step-circle {
  transition: background-color 0.3s ease;
}

.step-line {
  transition: background-color 0.3s ease 0.1s;
}

以上方法可以根据项目需求选择使用，第三方组件库适合快速开发，自定义组件则提供更大的灵活性。