Components

Stepper 步骤条

多步流程进度指示：当前步高亮、已完成打勾、支持点击跳步。

部署向导

第 {{ step }} 步 / 共 4 步；linear 模式下必须按序完成。

Step 2 of 0

<Stepper v-model="step" :steps="[
  { step: 1, title: '基础信息' },
  { step: 2, title: '网络拓扑' },
  { step: 3, title: '安全策略' },
  { step: 4, title: '确认部署' }
]" />
<div class="mt-5 flex justify-end gap-2">
  <Button variant="outline" color="neutral" size="sm" :disabled="step <= 1" @click="step--">上一步</Button>
  <Button variant="solid" color="primary" size="sm" :disabled="step >= 4" @click="step++">下一步</Button>
</div>

纵向布局

orientation=vertical 适合侧栏流程。

已创建工单 #4821

等待配额组确认

Step 2 of 0

<Stepper :model-value="2" orientation="vertical" :steps="[
  { step: 1, title: '提交申请', description: '已创建工单 #4821' },
  { step: 2, title: '资源审批', description: '等待配额组确认' },
  { step: 3, title: '节点交付' }
]" />

API 参考

属性	类型	默认值	说明
`model-value`	`number`	`1`	v-model 当前步骤号。
`steps`	`{ step, title, description?, completed?, disabled? }[]`	`—`	步骤定义。
`orientation`	`'horizontal' \| 'vertical'`	`horizontal`	排布方向。
`linear`	`boolean`	`false`	强制按序进行。