步骤条 Steps

Steps

步骤条布局

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

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

Steps API

IStepsProps

参数	类型	说明	默认值
current	number	指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态, 也可配置成 step 中对应的 key	-
labelPlacement	’vertical’ | ‘horizontal’	labelPlacement	-
progressDot	boolean	点状步骤条，labelPlacement 将强制为vertical	-
size	’default’ | ‘small’	指定大小，目前支持普通（default）和迷你（small）	-
status	’wait’ | ‘process’ | ‘finish’ | ‘error’	指定当前步骤的状态，可选 wait process finish error	-
initial	number	起始序号，从 0 开始记数	-

Step API

IStepProps

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

示例图

Steps 示例代码

<View title="人员列表" version="2">
  <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="人员列表" version="2">
  <Steps current="one">
    <Step
      title="Finished"
      subtitle="#{moment('finishAt').format('YYYY-MM-DD HH:mm:ss')}"
      description="This is a description."
      onClick="#{() => console.log('click')}"
      key="zero"
      show="#{getContainerByKey('table').data[0].name === '12'}"
    />
    <Step
      title="In Progress"
      subtitle="#{moment('progressAt').format('YYYY-MM-DD HH:mm:ss')}"
      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>

注意：当前例子为0.17.x 版本