Steps 步骤条 - Vant 4
Steps 步骤条
介绍
用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。
引入
通过以下方式来全局注册组件，更多注册方式请参考组件注册。
js
import { createApp } from'vue'; import { Step, Steps } from'vant'; const app = createApp(); app.use(Step); app.use(Steps);🎯 代码演示
📋 基础用法
通过 active 属性控制当前步骤，让用户清晰了解操作进度。索引从 0 开始计算，就像数组一样简单！
html
<template>
<van-steps :active="active">
<van-step>买家下单</van-step>
<van-step>商家接单</van-step>
<van-step>买家提货</van-step>
<van-step>交易完成</van-step>
</van-steps>
<div class="demo-buttons">
<van-button @click="nextStep" type="primary">下一步</van-button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const active = ref(1);
const nextStep = () => {
if (active.value < 3) {
active.value++;
}
};
return {
active,
nextStep
};
},
};
</script>
<style>
.demo-buttons {
margin-top: 20px;
text-align: center;
}
</style>🎨 自定义样式
通过 active-icon 和 active-color 属性，打造独特的视觉效果，让步骤条更符合你的品牌风格！
html
<template>
<van-steps
:active="active"
active-icon="success"
active-color="#38f"
>
<van-step>注册账号</van-step>
<van-step>验证邮箱</van-step>
<van-step>完善信息</van-step>
<van-step>开始使用</van-step>
</van-steps>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const active = ref(2);
return { active };
},
};
</script>📱 竖向步骤条
设置 direction="vertical" 属性，适配移动端的纵向布局，节省横向空间！
html
<template>
<van-steps
:active="active"
direction="vertical"
active-color="#ff6034"
>
<van-step>
<h3>订单确认</h3>
<p>请确认订单信息</p>
</van-step>
<van-step>
<h3>支付订单</h3>
<p>选择支付方式完成付款</p>
</van-step>
<van-step>
<h3>订单发货</h3>
<p>商家正在准备发货</p>
</van-step>
<van-step>
<h3>确认收货</h3>
<p>收到货物后请确认</p>
</van-step>
</van-steps>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const active = ref(1);
return { active };
},
};
</script>📋 API
🎛️ Steps Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| active | 📍 当前步骤对应的索引值 | *number | string* |
| direction | 📐 步骤条方向，可选值为 vertical | string | horizontal |
| active-icon | ✅ 当前步骤对应的底部图标，可选值见 Icon 组件 | string | checked |
| inactive-icon | ⚪ 非当前步骤对应的底部图标，可选值见 Icon 组件 | string | - |
| finish-icon | 🏁 已完成步骤对应的底部图标，优先级高于 inactive-icon，可选值见 Icon 组件 | string | - |
| active-color | 🎨 当前步骤和已完成步骤的颜色 | string | #1989fa |
| inactive-color | 🔘 未激活步骤的颜色 | string | #969799 |
| icon-prefix | 🏷️ 图标类名前缀，等同于 Icon 组件的 class-prefix 属性 | string | van-icon |
🎪 Step Slots
| 名称 | 说明 |
|---|---|
| default | 📝 步骤内容 |
| active-icon | ✨ 自定义激活状态图标 |
| inactive-icon | 🔘 自定义未激活状态图标 |
| finish-icon | 🎯 自定义已完成步骤对应的底部图标，优先级高于 inactive-icon |
🎪 Steps Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click-step | 👆 点击步骤的标题或图标时触发 | index: number |
📘 类型定义
组件导出以下类型定义，方便在 TypeScript 项目中使用：
ts
import type { StepsProps, StepsDirection } from 'vant';🎨 主题定制
🎭 样式变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --van-step-text-color | var(--van-text-color-2) | 📝 步骤文字颜色 |
| --van-step-active-color | var(--van-primary-color) | ✨ 激活步骤颜色 |
| --van-step-process-text-color | var(--van-text-color) | 🔄 进行中步骤文字颜色 |
| --van-step-font-size | var(--van-font-size-md) | 🔤 步骤文字大小 |
| --van-step-line-color | var(--van-border-color) | 📏 连接线颜色 |
| --van-step-finish-line-color | var(--van-primary-color) | 🏁 完成步骤连接线颜色 |
| --van-step-finish-text-color | var(--van-text-color) | ✅ 完成步骤文字颜色 |
| --van-step-icon-size | 12px | 🔘 步骤图标大小 |
| --van-step-circle-size | 5px | ⭕ 步骤圆点大小 |
| --van-step-circle-color | var(--van-gray-6) | 🔘 步骤圆点颜色 |
| --van-step-horizontal-title-font-size | var(--van-font-size-sm) | 📐 水平步骤标题字体大小 |
| --van-steps-background | var(--van-background-2) | 🎨 步骤条背景色 |
🔗 相关文档
🧭 导航组件
- NavBar 导航栏 - 🧭 为页面提供导航功能，常用于页面顶部
- Tab 标签页 - 📑 分隔内容上有关联但属于不同类别的数据集合
- Tabbar 标签栏 - 📱 底部导航栏，用于在不同页面之间进行切换
- Sidebar 侧边导航 - 📋 垂直展示的导航菜单，一般用于后台管理系统
📊 展示组件
- Progress 进度条 - 📊 用于展示操作的当前进度
- Circle 环形进度条 - ⭕ 圆环形的进度条组件
- NoticeBar 通知栏 - 📢 用于循环播放展示一组消息通知
💬 反馈组件
- Toast 轻提示 - 💬 在页面中间弹出黑色半透明提示
- Dialog 弹出框 - 📱 模态对话框，在浮层中显示，引导用户进行相关操作
- Notify 消息提示 - 📨 在页面顶部展示消息提示
🛠️ 工具组件
- ConfigProvider 全局配置 - ⚙️ 用于全局配置 Vant 组件，提供深色模式、主题定制等能力