Steps 步驟條

引導使用者完成分步流程。水平 / 垂直方向、可點選導覽與狀態覆蓋。

步驟條

<template>
  <div class="demo-col" style="max-width: 680px; gap: 28px">
    <LhSteps :current="current">
      <LhStep title="採集" description="高畫質掃描入庫" />
      <LhStep title="校色" description="色值基準比對" />
      <LhStep title="審校" description="專家復核" />
      <LhStep title="發布" description="上線數位展廳" />
    </LhSteps>
    <div class="demo-row" style="gap: 12px">
      <LhButton size="small" :disabled="current === 0" @click="current--">上一步</LhButton>
      <LhButton size="small" type="primary" :disabled="current === 3" @click="current++">下一步</LhButton>
    </div>
    <LhSteps :current="2" direction="vertical">
      <LhStep title="採集" description="已完成" />
      <LhStep title="校色" description="已完成" />
      <LhStep title="審校" description="進行中" />
      <LhStep title="發布" description="待處理" />
    </LhSteps>
    <LhSteps :current="1" status="error" :clickable="true" @click="onStepClick">
      <LhStep title="第一步" />
      <LhStep title="出錯的一步" icon="lh-icon-user" />
      <LhStep title="第三步" />
    </LhSteps>
    <p class="demo-note">clickable 可點選導覽；status="error" 覆蓋整體狀態；icon 自訂圖示。</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    current: 1,
  }),
  methods: {
    onStepClick(index) {
      this.current = index
    },
  },
}
</script>

Steps Props

屬性	說明	類型	預設值
current	當前步驟索引（:current.sync，事件名 update:current，0 起）	number	0
direction	方向	'horizontal' \| 'vertical'	'horizontal'
clickable	步驟是否可點選導覽	boolean	false
status	整體覆蓋所有步驟的狀態（用於自訂展示）	'wait' \| 'process' \| 'finish' \| 'error'	—
sx	sx 快速佈局屬性	—	—

Step Props

屬性	說明	類型	預設值
title	步驟標題（也可用 title 插槽）	string	—
description	步驟描述（也可用 description 插槽）	string	—
icon	自訂圖示類別名（未傳時 finish/error 用勾叉，其餘顯示序號）	string	—

Events

事件	說明	回呼參數
click	點選步驟項（需 clickable 開啟才有意義）	(索引)