Steps 步骤条

展示操作流程及当前进度，支持横向和纵向排列。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 订单流程 -->
<fui-steps :items="[{ title: '提交' }, { title: '处理' }, { title: '完成' }]" :current="1" />

属性

属性	类型	说明	官网默认值
items	Array	步骤数据	[]
titleKey	String	标题字段	title
descrKey	String	描述字段	descr
textKey	String	节点文字字段	descr（官网表格值）
srcKey	String	图片字段	src
activeSrcKey	String	选中图片字段	activeSrc
current	Number / String	当前步骤索引，从 0 开始	0
direction	String	排列方向：row、column	row
padding	Array	容器内边距	[]
background	String	容器背景色	transparent
height	Number / String	节点区域高度，纵向时为宽度，单位 rpx	50
nodeColor	String	节点默认颜色	#ccc
color	String	标题颜色	#181818
size	Number / String	标题字号，单位 rpx	32
fontWeight	Number / String	标题字重	400
descrColor	String	描述颜色	#B2B2B2
descrSize	Number / String	描述字号，单位 rpx	24
activeColor	String	已完成步骤颜色	#465CFF
processStatus	String	当前步骤状态：wait、fail、success	-
processColor	String	当前步骤颜色	-
radius	String	自定义图片圆角	0rpx
isMark	Boolean	当前步骤是否显示对勾	true
isWait	Boolean	横向时下一段连线是否高亮一半	false
lineBold	Boolean	连线是否加粗	false
itemGap	Number / String	纵向步骤间距，单位 rpx	64
lineThrough	Boolean	横向圆点节点的连线是否贯穿	false

官网将 textKey 默认值列为 descr，本地源码为 text。非 nvue 默认高亮色可通过 --fui-color-primary 调整。

事件

事件	说明	回调参数
click	点击步骤内容	包含 index 和当前步骤字段的对象

插槽

插槽	说明
—	官网未列出该组件的插槽