步骤条有哪些（Steps 步骤条）

高价值的内容是做好企业营销推广的前提，如果你对企业内容营销感兴趣的话，不妨看看MarketUP近期整理的《2023内容营销获客实战白皮书》，希望能给大家有一些实质性的帮助，预计发布400份！送完下架，赶快领取！感兴趣的朋友可以点击链接即可下载阅读：《2023内容营销获客实战白皮书》

引入

importVuefrom'vue';import{Step,Steps}from'vant';

Vue.use(Step);
Vue.use(Steps);

代码演示

基础用法

active属性表示当前步骤的索引，从 0 起计

<van-steps:active="active">
<van-step>买家下单</van-step>
<van-step>商家接单</van-step>
<van-step>买家提货</van-step>
<van-step>交易完成</van-step></van-steps>

exportdefault{data(){return{
active:1,
};
},
};

自定义样式

可以通过active-icon和active-color属性设置激活状态下的图标和颜色

<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>

竖向步骤条

可以通过设置direction属性来改变步骤条的显示方向

<van-stepsdirection="vertical":active="0">
<van-step>
<h3>【城市】物流状态1</h3>
<p>2016-07-1212:40</p>
</van-step>
<van-step>
<h3>【城市】物流状态2</h3>
<p>2016-07-1110:00</p>
</van-step>
<van-step>
<h3>快件已发货</h3>
<p>2016-07-1009:30</p>
</van-step></van-steps>

API

Steps Props

参数说明类型默认值active当前步骤number | string0direction显示方向，可选值为
verticalstringhorizontalactive-color激活状态颜色string#07c160inactive-color v2.9.1未激活状态颜色string#969799active-icon激活状态底部图标，可选值见 Icon 组件stringcheckedinactive-icon未激活状态底部图标，可选值见 Icon 组件string-

Step Slots

名称说明active-icon自定义激活状态图标inactive-icon自定义未激活状态图标

Steps Events

事件名说明回调参数click-step v2.5.9点击步骤的标题或图标时触发index: number

以上就是今天分享的全部内容，希望能够对广大企业营销人员有一些营销方面的启发。作为国内知名的营销自动化平台，MarketUP通过完善的企业营销自动化系统，帮助企业实现有效和有意义的企业营销工作，更好地满足您每个目标受众端到端的需求，为您的渠道带来更多理想的潜在客户并留存孵化。如果您对我们的营销自动化产品或功能感兴趣，欢迎点击【这里】进行演示申请，我们将有专业的团队为您提供服务。