1. 安装 Vant4：
确保你的项目中已经安装了Vue.js，并使用以下命令安装Vant4：
npm install vant@next
2. 引入 Vant4：
在你的Vue组件中，通过import语句引入需要的Vant组件。对于步骤条，你需要引入Steps组件。
import { createApp } from 'vue';
import { Steps, Step } from 'vant';
import 'vant/lib/index.css';
const app = createApp(/* your app */);
app.use(Steps);
app.use(Step);
3. 使用步骤条组件：
在你的Vue模板中使用<van-steps>和<van-step>标签来创建步骤条。
<template>
<div>
<van-steps :active="active" :direction="direction">
<van-step>步骤 1</van-step>
<van-step>步骤 2</van-step>
<van-step>步骤 3</van-step>
<!-- 可以根据需要添加更多步骤 -->
</van-steps>
</div>
</template>
<script>
export default {
data() {
return {
active: 0, // 当前激活的步骤索引
direction: 'horizontal', // 步骤条方向，可以是 'horizontal' 或 'vertical'
};
},
};
</script>
4. 自定义样式和配置：
Vant的组件通常提供了许多配置选项和样式自定义的能力，你可以根据需要在组件中进行配置。
<van-steps :active="active" :direction="direction" color="#07c160">
<!-- 步骤内容 -->
</van-steps>
在这个例子中，color属性用于设置步骤条的颜色。
5. 处理步骤切换：
你可以通过修改active属性来实现步骤的切换。例如，你可以在点击按钮或其他交互事件时，通过方法修改active的值来改变当前激活的步骤。
<button @click="nextStep">下一步</button>
methods: {
nextStep() {
if (this.active < 2) {
this.active += 1;
}
},
}
以上是使用Vant4创建步骤条的基本步骤。根据实际需求，你还可以进一步调整样式、配置和交互行为。
转载请注明出处：http://www.zyzy.cn/article/detail/5841/Vant