外观
Steps 步骤条
约 824 字大约 3 分钟
2025-10-31
该组件一般用于完成一个任务要分几个步骤,标识目前处于第几步的场景。
基本使用
- 通过
value参数标识目前处于第几步,从0开始
<template>
<un-steps :value="0">
<un-steps-item title="已下单" desc="10:30">
</un-steps-item>
<un-steps-item title="已出库" desc="10:35" ></un-steps-item>
<un-steps-item title="运输中" desc="11:40"></un-steps-item>
</un-steps>
</template>
<script setup lang="ts">
// 可根据需要添加逻辑
</script>错误状态
如果设置un-steps-item的error参数为true的话,当前步骤将会为"失败"的状态
<template>
<un-steps :value="1">
<un-steps-item title="已下单" desc="10:30"></un-steps-item>
<un-steps-item error title="仓库着火" desc="10:35"></un-steps-item>
<un-steps-item title="破产清算" desc="11:40"></un-steps-item>
</un-steps>
</template>
<script setup lang="ts">
// 可根据需要添加逻辑
</script>步骤条模式
un-steps的dot参数设置为true的话,将会以点状的形式展示步骤条样式。
<template>
<un-steps :value="1" dot>
<un-steps-item title="已下单" desc="10:30"></un-steps-item>
<un-steps-item title="已出库" desc="10:35"></un-steps-item>
<un-steps-item title="运输中" desc="11:40"></un-steps-item>
</un-steps>
</template>
<script setup lang="ts">
// 可根据需要添加逻辑
</script>竖向模式
un-steps的direction参数设置为column的话,组件将会以竖向的形式展示步骤条内容。
<template>
<un-steps :value="1" direction="column">
<un-steps-item title="已下单" desc="10:30">
</un-steps-item>
<un-steps-item title="已出库" desc="10:35">
</un-steps-item>
<un-steps-item title="运输中" desc="11:40"></un-steps-item>
</un-steps>
</template>
<script setup lang="ts">
// 可根据需要添加逻辑
</script>自定义图标
- 通过
activeIcon可以设置激活状态的图标 - 通过
inactiveIcon可以设置非激活状态的图标
<template>
<un-steps
:value="1" activeIcon="checkmark" inactiveIcon="arrow-right">
<un-steps-item title="已下单" desc="10:30"></un-steps-item>
<un-steps-item title="已出库" desc="10:35"></un-steps-item>
<un-steps-item title="运输中" desc="11:40"></un-steps-item>
</un-steps>
</template>
<script setup lang="ts">
// 可根据需要添加逻辑
</script>通过插槽自定义样式
通过默认插槽,可以自定义某个步骤当前状态的特殊标识
<template>
<un-steps :value="1">
<un-steps-item title="已下单" desc="10:30"></un-steps-item>
<un-steps-item title="已出库" desc="10:35"></un-steps-item>
<un-steps-item title="运输中" desc="11:40">
<text class="slot-icon" slot="icon">运</text>
</un-steps-item>
</un-steps>
</template>
<script setup lang="ts">
// 可根据需要添加逻辑
</script>
<style lang="scss">
.slot-icon {
width: 21px;
height: 21px;
background-color: $u-warning;
border-radius: 100px;
font-size: 12px;
color: #fff;
line-height: 21px;
text-align: center;
}
</style>API
Steps Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| direction | 排列方向 | Enum | row |
| value | 设置第几个步骤 | number | 0 |
| activeColor | 激活状态颜色 | string | #3c9cff |
| inactiveColor | 未激活状态颜色 | string | #969799 |
| activeIcon | 激活状态的图标 | string | - |
| inactiveIcon | 未激活状态图标 | string | - |
| errorColor | 错误状态颜色 | string | #ee0a24 |
| dot | 是否显示点类型 | boolean | false |
Steps Item Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | string | number | - |
| desc | 描述文本 | string | number | - |
| iconSize | 图标大小 | string | number | 17 |
| error | 当前步骤是否处于失败状态 | boolean | false |
Slot
| 名称 | 说明 |
|---|---|
| default(默认) | 自定义标题 |
| icon | 自定义图标 |
| desc | 自定义描述文本 |
