步骤条 Steps

基础用法

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>

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

标题内容

-

-