Os UiSteps 步骤条
引导用户按照流程完成任务的分步导航条， 可根据实际应用场景设定步骤，步骤不得少于 2 步。
基础用法
设置 active 属性，接受一个 Number，表明步骤的 index，从 0 开始，如果不设置会读取data中status字段为状态显示。
默认步骤条的状态只有四个wait pass warning reject，分别是等待，通过，警告，拒绝。
默认地步骤条会自带Completed节点，当前面步骤全部完成则会自动完成，隐藏可设置属性completed=''，该值接受字符串格式。
可使用 size 属性改变选择大小。 除了默认大小外，还有另外两个选项： large, mini。
Title01
This is description 01.
Title02
This is description 02.
Title03
This is description 03.
Title04
This is description 04.
Completed
html
<script setup>
import { ref } from 'vue'
const steps = [
{
title: 'Title01',
description: 'This is description 01.',
status: 'pass' // wait / pass / warning / reject
}
// ...
]
const active = ref(0) // 当前步骤，开始为0，此值如果不设置会默认采取data的字段status
</script>
<os-steps
:data="steps"
:active="active"
></os-steps>带提示的进度条
一般地如果数据里存在message默认会自动在该节点弹出提示，可通过属性steps-keys手动设置为其他字段名，如存在会自动弹出提示，但等待操作状态不会弹出提示。
Title01
This is description 01.
Title02
This is description 02.
Title03
This is description 03.
Title04
This is description 04.
Completed
html
<script setup>
import { ref } from 'vue'
const steps = [
{
title: 'Title01',
description: 'This is description 01.',
status: 'pass', // wait / pass / warning / reject
msg: 'This is Tips'
}
// ...
]
const active = ref(0) // 当前步骤，开始为0，此值如果不设置会默认采取data的字段status
</script>
<os-steps
:data="steps"
:active="active"
:steps-keys="{ message: 'msg' }"
></os-steps>垂直的步骤
属性layout设置为vertical，可设置为垂直的步骤条。
Title01
This is description 01.
Title02
This is description 02.
Title03
This is description 03.
Title04
This is description 04.
Completed
插槽
icon title description 插槽分别对应是图标，标题，描述，插槽暴露该步骤所有数据
结合reverse属性参数，接受布尔值，是否反转步骤，可达到以下效果。
你提交了订单，请等待系统确认。
2023-05-12 16:15
您的订单已经进入广州仓库准备出库
2023-05-12 16:15
已下单
温馨提示：您的订单预计明天送达。
2023-05-12 16:15
仓库处理
打包完成
2023-05-12 16:15
您的订单在【广州南沙分拣中心】准备送往【广州天河分拣中心】
2023-05-12 16:15
您的订单在【广州天河分拣中心】准备送往【广州科韵营业部】
2023-05-12 16:15
运输中
您的订单已到达【广州科韵营业部】
2023-05-12 16:15
派送中
您的订单已正在配送途中，请您 耐心等待。
2023-05-12 16:15
html
<script setup>
import { ref } from 'vue'
const steps = [
{
title: '',
description: '你提交了订单，请等待系统确认。',
time: '2023-05-12 16:15'
},
{
title: '已下单',
description: '温馨提示：您的订单预计明天送达。',
time: '2023-05-12 16:15',
icon: 'os-icon-document'
},
// ...
{
title: '派送中',
description: '您的订单已正在配送途中，请您 耐心等待。',
time: '2023-05-12 16:15',
icon: 'os-icon-shield',
status: 'pass'
}
]
</script>
<os-steps
:data="steps"
reverse
completed=""
>
<template #icon="{ step }">
<span>
<i v-if="step.icon" :class="[step.icon]"></i>
</span>
</template>
<template #description="{ step }">
<div>{{ step.description }}</div>
<div class="os-heading9 os-neutral-3 os-margin-top-s">{{ step.time }}</div>
</template>
</os-steps>