更新记录
1.0.1(2023-04-21)
支持icon slot
支持设置竖向左边距
1.0.0(2023-04-20)
支持uni_modules
0.0.0(2023-04-20)
2023-04-20
- 实现与vant steps一样功能
- 支持小程序端与h5
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
xy-steps
Steps 步骤条
介绍
用于展示操作流程的各个环节,让用户了解当前的操作在整体流程中的位置。
代码演示
基础用法
active
属性表示当前步骤的索引,从 0 起计。
<xy-steps :active="active">
<xy-step>买家下单</xy-step>
<xy-step>商家接单</xy-step>
<xy-step>买家提货</xy-step>
<xy-step>交易完成</xy-step>
</xy-steps>
import { ref } from 'vue';
export default {
setup() {
const active = ref(1);
return { active };
},
};
自定义样式
可以通过 active-icon
和 active-color
属性设置激活状态下的图标和颜色。
<xy-steps :active="active" active-icon="success" active-color="#07c160">
<xy-step>买家下单</xy-step>
<xy-step>商家接单</xy-step>
<xy-step>买家提货</xy-step>
<xy-step>交易完成</xy-step>
</xy-steps>
竖向步骤条
可以通过设置 direction
属性来改变步骤条的显示方向。
<xy-steps direction="vertical" :active="0">
<xy-step>
<h3>【城市】物流状态1</h3>
<p>2016-07-12 12:40</p>
</xy-step>
<xy-step>
<h3>【城市】物流状态2</h3>
<p>2016-07-11 10:00</p>
</xy-step>
<xy-step>
<h3>快件已发货</h3>
<p>2016-07-10 09:30</p>
</xy-step>
</xy-steps>
API
Steps Props
参数 |
说明 |
类型 |
默认值 |
active |
当前步骤对应的索引值 |
number | string |
0 |
direction |
步骤条方向,可选值为 vertical |
string |
horizontal |
active-icon |
当前步骤对应的底部图标,可选值见 uni-icons |
string |
checkmarkempty |
inactive-icon |
非当前步骤对应的底部图标,可选值见 uni-icons |
string |
- |
active-color |
当前步骤和已完成步骤的颜色 |
string |
#1989fa |
inactive-color |
未激活步骤的颜色 |
string |
#969799 |
icon-prefix |
图标类名前缀,等同于 uni-icons 组件的customPrefix |
string |
- |
Step Slots
名称 |
说明 |
default |
步骤内容 |
active-icon |
自定义激活状态图标 |
inactive-icon |
自定义未激活状态图标 |
Steps Events
事件名 |
说明 |
回调参数 |
click-step |
点击步骤的标题或图标时触发 |
index: number |
主题定制
样式变量
组件提供了下列 CSS 变量,可用于自定义样式。
名称 |
默认值 |
描述 |
--xy-step-text-color |
#969799 |
- |
--xy-step-active-color |
#1989fa |
- |
--xy-step-font-size |
14px |
- |
--xy-step-line-color |
#ebedf0 |
- |
--xy-step-finish-line-color |
#1989fa |
- |
--xy-step-finish-text-color |
#323233 |
- |
--xy-step-icon-size |
12px |
- |
--xy-step-circle-size |
5px |
- |
--xy-step-horizontal-title-font-size |
12px |
- |
--xy-steps-background |
#fff |
- |