# Steps 步骤条
该组件一般用于完成一个任务要分几个步骤,标识目前处于第几步的场景。
# 平台差异说明
App(vue) | App(nvue) | H5 | 小程序 |
---|---|---|---|
√ | √ | √ | √ |
# 基本使用
说明
由于安卓nvue
下,overflow
属性不支持visible
值,故此组件暂不支持安卓nvue
环境。
- 通过
current
参数标识目前处于第几步,从0开始
<template>
<up-steps current="0">
<up-steps-item title="已下单" desc="10:30">
</up-steps-item>
<up-steps-item title="已出库" desc="10:35" ></up-steps-item>
<up-steps-item title="运输中" desc="11:40"></up-steps-item>
</up-steps>
</template>
# 错误状态
如果设置up-steps-item
的error
参数为true
的话,当前步骤将会为“失败”的状态
<up-steps current="1">
<up-steps-item title="已下单" desc="10:30"></up-steps-item>
<up-steps-item error title="仓库着火" desc="10:35"></up-steps-item>
<up-steps-item title="破产清算" desc="11:40"></up-steps-item>
</up-steps>
# 步骤条模式
up-steps
的dot
参数设置为true
的话,将会以点状的形式展示步骤条样式。
<up-steps current="1" dot>
<up-steps-item title="已下单" desc="10:30"></up-steps-item>
<up-steps-item title="已出库" desc="10:35"></up-steps-item>
<up-steps-item title="运输中" desc="11:40"></up-steps-item>
</up-steps>
# 竖向模式
up-steps
的direction
参数设置为column
的话,组件将会以竖向的形式展示步骤条内容。
<template>
<up-steps current="1" direction="column">
<up-steps-item title="已下单" desc="10:30">
</up-steps-item>
<up-steps-item title="已出库" desc="10:35">
</up-steps-item>
<up-steps-item title="运输中" desc="11:40"></up-steps-item>
</up-steps>
</template>
# 自定义图标
- 通过
activeIcon
可以设置激活状态的图标 - 通过
inactiveIcon
可以设置非激活状态的图标
<up-steps
current="1" activeIcon="checkmark" inactiveIcon="arrow-right">
<up-steps-item title="已下单" desc="10:30"></up-steps-item>
<up-steps-item title="已出库" desc="10:35"></up-steps-item>
<up-steps-item title="运输中" desc="11:40"></up-steps-item>
</up-steps>
# 通过插槽自定义样式
通过默认插槽,可以自定义某个步骤当前状态的特殊标识
<up-steps :current="1">
<up-steps-item title="已下单" desc="10:30"></up-steps-item>
<up-steps-item title="已出库" desc="10:35"></up-steps-item>
<up-steps-item title="运输中" desc="11:40">
<template #icon>
<text class="slot-icon">运</text>
</template>
</up-steps-item>
</up-steps>
<style lang="scss">
.slot-icon {
width: 21px;
height: 21px;
background-color: $up-warning;
border-radius: 100px;
font-size: 12px;
color: #fff;
line-height: 21px;
text-align: center;
}
</style>
# 右侧演示页面源代码地址
# API
# Steps Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
direction | row-横向,column-竖向 | String | row | column |
current | 设置当前处于第几步 | Number | String | 0 | - |
activeColor | 激活状态颜色 | String | #3c9cff | - |
inactiveColor | 未激活状态颜色 | String | #969799 | - |
activeIcon | 激活状态的图标 | String | - | - |
inactiveIcon | 未激活状态图标 | String | - | - |
dot | 是否显示点类型 | Boolean | false | true |
# Steps Item Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
title | 标题文字 | String | - | - |
current | 描述文本 | String | - | - |
iconSize | 图标大小 | String | Number | 17 | - |
error | 当前步骤是否处于失败状态 | Boolean | false | true |
itemStyle | 当前步骤自定义样式 | Objct | {} | - |
# Slot
名称 | 说明 |
---|---|
- | 自定步骤状态内容 |