1. 安装 Vant UI 库：
npm install vant
2. 引入 Vant Steps 组件：
import { Steps, Step } from 'vant';
3. 在需要使用步骤条的地方添加 Steps 组件：
<template>
<div>
<Steps :active="active">
<Step>步骤 1</Step>
<Step>步骤 2</Step>
<Step>步骤 3</Step>
</Steps>
<!-- 其他页面内容 -->
</div>
</template>
<script>
import { Steps, Step } from 'vant';
export default {
components: {
Steps,
Step,
},
data() {
return {
active: 0, // 当前激活的步骤索引
};
},
// 其他组件配置...
};
</script>
在上述示例中，<Steps> 标签用于创建步骤条，而 <Step> 标签用于定义每个步骤。通过设置 :active 属性来指定当前激活的步骤索引。你可以根据具体需求，调整步骤的数量和显示内容。
此外，Vant Steps 还提供了一些其他属性和事件，如 direction、active-icon 等，具体的配置项可以根据 Vant UI 文档进行调整。
确保在使用 Vant Steps 之前，你已经正确安装并配置了 Vant UI。如果你使用的是 Vue.js 框架，还需要在组件中引入并注册 Steps 和 Step 组件，以便在模板中使用。
转载请注明出处：http://www.zyzy.cn/article/detail/5689/Vant