js移动端流程展示控件

<template>
  <div class="flow-container">
    <div class="step" :class="{ active: currentStep === index }" v-for="(step, index) in steps" :key="index">
      {{ step.name }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const steps = ref([
  { name: 'Step 1', completed: false },
  { name: 'Step 2', completed: false },
  { name: 'Step 3', completed: false }
]);

const currentStep = ref(0);

function nextStep() {
  if (currentStep.value < steps.value.length - 1) {
    steps.value[currentStep.value].completed = true;
    currentStep.value++;
  }
}

function prevStep() {
  if (currentStep.value > 0) {
    currentStep.value--;
    steps.value[currentStep.value].completed = false;
  }
}
</script>

<style>
.flow-container {
  display: flex;
  justify-content: space-between;
}

.step {
  padding: 10px;
  border: 1px solid #ccc;
}

.step.active {
  background-color: #007bff;
  color: white;
}
</style>