步骤条 Steps

Steps

步骤条布局

一般可用于描述或显示相关业务进度的场景， 比如外卖下单 -> 商家接单 -> 骑手接单 -> 骑手配送 -> 完成

使用方式：Steps 一般与枚举类型搭配使用（后端需要一个枚举类型来配合）

Steps API

参数	说明	类型	默认值
current	指定当前步骤，可配置成 step 中对应的 key，可被子 Step 元素 status 属性覆盖。	number	0
labelPlacement	指定标签放置位置，可选值：vertical | horizontal	string	horizontal
progressDot	点状步骤条，可以设置为一个 function，labelPlacement 将强制为vertical	boolean | (iconDot, {index, status, title, description}) => ReactNode	false
size	指定大小，可选值：default | small	string	default
status	指定当前步骤的状态，可选值：wait | process | finish | error	string	process
initial	起始序号，从 0 开始记数	number	0
align	图标和内容对齐方式，目前仅对水平方向的步骤条有效	center ｜ left	0

Steps.Step API

参数	说明	类型	默认值
key	唯一标识，使用 show 后计算会不准确，此时 current 可配对应 key 值	string	-
title	标题	string | ReactNode	-
description	步骤的详情描述，可选	string | ReactNode	-
icon	步骤图标的类型，可选	string | ReactNode	-
status	指定状态。当不配置该属性时，会使用 Steps 的 current 来自动指定状态。可选值：wait | process | finish | error	string	wait
onClick	点击事件	() => void	-
show	是否展示	boolean	-

示例图

Steps 示例代码

<View title="人员列表">
  <Steps current="1">
    <Step
      title="外卖下单"
      description="这是外卖下单"
      key="1"
    />
    <Step
      title="商家接单"
      description="这是商家接单"
      key="2"
    />
    <Step
      title="骑手接单"
      description="这是骑手接单"
      key="3"
    />
    <Step
      title="骑手配送"
      description="这是骑手配送"
      key="4"
    />
     <Step
      title="完成"
      description="这是完成"
      key="5"
    />
  </Steps>
</View>

<View title="人员列表">
  <Steps current="one">
    <Step
      title="Finished"
      description="This is a description."
      @onClick="() => console.log('click')"
      key="zero"
      :show="getContainerByKey('table').data[0].name === '12'"
    />
    <Step
      title="In Progress"
      description="This is a description."
      key="one"
      :show="getContainerByKey('table').data[0].name === '1212'"
    />
    <Step
      title="Waiting"
      description="This is a description."
      key="two"
    />
  </Steps>
</View>