步骤条 Steps

用于引导用户按照流程完成任务，支持水平和垂直方向、步骤描述和交互式操作。

基础用法

通过 v-model 绑定当前步骤索引，description 设置步骤描述。

1

输入邮箱和邀请码

支持常见邮箱

2

校验邮箱

输入邮箱验证码

3

设置信息

设置用户名和密码

4

完成注册

欢迎你的加入

<template>
  <bp-steps v-model="current" type="vertical">
    <bp-step v-for="v in progessList" :description="v.description">{{ v.title }}</bp-step>
  </bp-steps>
</template>

<script setup lang="ts">
import { ref } from "vue";

const current = ref(0);
const progessList = [
  { title: "输入邮箱和邀请码", description: "支持常见邮箱" },
  { title: "校验邮箱", description: "输入邮箱验证码" },
  { title: "设置信息", description: "设置用户名和密码" },
  { title: "完成注册", description: "欢迎你的加入" },
];
</script>

水平步骤条

默认为水平方向，通过 type="vertical" 切换为垂直方向。

步骤一

填写信息

2

步骤二

审核中

3

步骤三

完成

<template>
  <div style="display: flex; gap: 20px">
    <bp-steps v-model="current" type="horizontal">
      <bp-step description="填写信息">步骤一</bp-step>
      <bp-step description="审核中">步骤二</bp-step>
      <bp-step description="完成">步骤三</bp-step>
    </bp-steps>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const current = ref(1);
</script>

交互式步骤条

配合按钮实现上一步/下一步交互。

1

填写信息

填写基本信息

2

审核中

等待审核

3

完成

注册成功

<template>
  <div>
    <bp-steps v-model="current">
      <bp-step v-for="v in steps" :description="v.description">{{ v.title }}</bp-step>
    </bp-steps>
    <div style="margin-top: 20px">
      <bp-button size="small" type="plain" @click="prev" :disabled="current <= 0">上一步</bp-button>
      <bp-button
        size="small"
        status="primary"
        @click="next"
        :disabled="current >= steps.length - 1"
        style="margin-left: 8px"
      >
        下一步
      </bp-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const current = ref(0);
const steps = [
  { title: "填写信息", description: "填写基本信息" },
  { title: "审核中", description: "等待审核" },
  { title: "完成", description: "注册成功" },
];

const prev = () => {
  if (current.value > 0) current.value--;
};
const next = () => {
  if (current.value < steps.length - 1) current.value++;
};
</script>

Steps 属性

v-model	当前步骤索引	Number	-	-
type	方向	String	horizontal	-
hide-line	是否隐藏连接线	Boolean	-	-

Step 属性

index	步骤索引	Number	-	-
status	状态	String	wait	-
description	描述	String	-	-
type	方向	String	horizontal	-
hide-line	是否隐藏连接线	Boolean	-	-

Steps 插槽

default

Step 列表

-

-

Step 插槽

default

标题内容

-

-