Steps 步骤条

引导用户按顺序完成多阶段任务或表单向导的步骤条组件，支持数字序号指示器、小圆点模式、横向/纵向布局与动态切换控制。

---

代码示例

1. 基础横向步骤条 (Horizontal Steps)

绑定 :current 与 :items，配合按钮控制步骤前进与后退。

<template>
  <view>
    <mu-steps :current="currentStep" :items="stepItems" />
    
    <view class="actions">
      <mu-button size="small" :disabled="currentStep === 0" @click="currentStep--">
        上一步
      </mu-button>
      <mu-button size="small" type="primary" :disabled="currentStep === stepItems.length - 1" @click="currentStep++">
        {{ currentStep === stepItems.length - 1 ? '完成' : '下一步' }}
      </mu-button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const currentStep = ref(1)
const stepItems = ref([
  { title: '实名认证', desc: '上传身份证' },
  { title: '填写信息', desc: '补充基本资料' },
  { title: '人工审核', desc: '预计 10 分钟' },
  { title: '完成开通', desc: '正式开启权限' }
])
</script>

---

2. 小圆点步骤条 (Dot Steps)

设置 :show-number="false" 隐藏内部数字编号，展示极简圆点状态。

<template>
  <mu-steps :current="1" :show-number="false" :items="stepItems" active-color="#10B981" />
</template>

---

3. 垂直步骤条 (Vertical Steps)

设置 direction="vertical" 开启纵向垂直表单引导模式。

<template>
  <mu-steps direction="vertical" :current="1" :items="verticalSteps" active-color="#8B5CF6" />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
current	当前激活的步骤索引（从 0 开始）	Number	-	0
items / steps	步骤数据源列表 [{ title, desc, time }]	Array	-	[]
direction	步骤条展示方向	String	horizontal (横向) | vertical (纵向)	'horizontal'
showNumber	是否在节点内部显示 1, 2, 3 数字编号	Boolean	true | false	true
activeColor	完成态与当前进行态主题颜色	String	-	'#171717'
reverse	是否倒序展示步骤	Boolean	true | false	false

---

步骤项数据结构 (Item Object)

字段名	说明	类型
title	步骤标题	String
desc / description	步骤详细描述文案	String
time / date	步骤关联的时间/日期文本	String