vue2 使用组件 实现步骤条

在Vue 2中，可以通过创建一个步骤条组件来实现。以下是一个简单的步骤条组件的示例代码：

<template>
  <div class="step-bar">
    <ul>
      <li v-for="(step, index) in steps" :key="index" :class="{'active': index === activeStep}">
        <span>{{ index + 1 }}</span>
        <span>{{ step.label }}</span>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  props: {
    steps: {
      type: Array,
      required: true
    },
    activeStep: {
      type: Number,
      default: 0
    }
  }
}
</script>
 
<style scoped>
.step-bar ul li {
  list-style-type: none;
  display: inline-block;
  text-align: center;
  position: relative;
  padding: 10px 20px;
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
}
 
.step-bar ul li.active {
  color: #fff;
  background-color: #007bff;
}
 
.step-bar ul li span:first-child {
  display: block;
  font-size: 14px;
  font-weight: bold;
}
 
.step-bar ul li span:last-child {
  display: block;
  font-size: 12px;
  color: #666;
}
</style>

使用该组件时，你需要传递一个步骤数组和当前激活的步骤索引：

<template>
  <div>
    <step-bar :steps="steps" :active-step="activeStep"></step-bar>
  </div>
</template>
 
<script>
import StepBar from './StepBar.vue';
 
export default {
  components: {
    StepBar
  },
  data() {
    return {
      steps: [
        { label: 'Step 1' },
        { label: 'Step 2' },
        { label: 'Step 3' },
        { label: 'Step 4' }
      ],
      activeStep: 0
    };
  }
};
</script>

在这个例子中，StepBar.vue 是步骤条组件，它接受一个 steps 数组作为 prop，并且一个 activeStep 来指示当前激活的步骤。样式可以根据需求进行调整。