<template>
  <div>
    <!-- 使用 van-steps 组件 -->
    <van-steps :active="active" :direction="direction" :active-color="activeColor">
      <van-step status="process" title="步骤一" description="这是步骤一的描述" />
      <van-step title="步骤二" description="这是步骤二的描述" />
      <van-step title="步骤三" description="这是步骤三的描述" />
    </van-steps>

    <!-- 按钮用于切换步骤 -->
    <div style="margin-top: 16px;">
      <van-button @click="prevStep">上一步</van-button>
      <van-button @click="nextStep">下一步</van-button>
    </div>
  </div>
</template>

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

export default {
  setup() {
    // 当前激活的步骤
    const active = ref(0);

    // 步骤条的方向，可选值为 'horizontal' 或 'vertical'
    const direction = ref('horizontal');

    // 激活状态的颜色
    const activeColor = ref('#1989fa');

    // 切换到上一步
    const prevStep = () => {
      active.value = Math.max(0, active.value - 1);
    };

    // 切换到下一步
    const nextStep = () => {
      active.value = Math.min(2, active.value + 1);
    };

    return {
      active,
      direction,
      activeColor,
      prevStep,
      nextStep,
    };
  },
};
</script>

<style>
/* 这是一个简单的样式示例，你可以根据需求自定义样式 */
</style>