Steps 步骤条

任务流程中常见的步骤条。

基本用法

可通过 current 设置当前进行的步骤，默认为 0：

不设置 current

步骤1

1

提示文字

步骤2

2

提示文字

步骤3

3

提示文字

设置 current

步骤1

提示文字

步骤2

2

提示文字

步骤3

3

提示文字

<template>
  <h4>不设置 current</h4>
  <i-steps>
    <i-steps-item>
      <template #title>步骤1</template>
      <template #description>提示文字</template>
    </i-steps-item>
    <i-steps-item>
      <template #title>步骤2</template>
      <template #description>提示文字</template>
    </i-steps-item>
    <i-steps-item>
      <template #title>步骤3</template>
      <template #description>提示文字</template>
    </i-steps-item>
  </i-steps>
  <h4>设置 current</h4>
  <i-steps :current="2">
    <i-steps-item>
      <template #title>步骤1</template>
      <template #description>提示文字</template>
    </i-steps-item>
    <i-steps-item>
      <template #title>步骤2</template>
      <template #description>提示文字</template>
    </i-steps-item>
    <i-steps-item>
      <template #title>步骤3</template>
      <template #description>提示文字</template>
    </i-steps-item>
  </i-steps>
</template>

显示代码复制代码复制代码

无序状态

可通过 dot 设置为无序小圆点步骤条：

不设置 current

步骤1

1

提示文字

步骤2

2

提示文字

步骤3

3

提示文字

设置 current

步骤1

提示文字

步骤2

2

提示文字

步骤3

3

提示文字

<template>
  <h4>不设置 current</h4>
  <i-steps dot>
    <i-steps-item>
      <template #title>步骤1</template>
      <template #description>提示文字</template>
    </i-steps-item>
    <i-steps-item>
      <template #title>步骤2</template>
      <template #description>提示文字</template>
    </i-steps-item>
    <i-steps-item>
      <template #title>步骤3</template>
      <template #description>提示文字</template>
    </i-steps-item>
  </i-steps>
  <h4>设置 current</h4>
  <i-steps dot :current="2">
    <i-steps-item>
      <template #title>步骤1</template>
      <template #description>提示文字</template>
    </i-steps-item>
    <i-steps-item>
      <template #title>步骤2</template>
      <template #description>提示文字</template>
    </i-steps-item>
    <i-steps-item>
      <template #title>步骤3</template>
      <template #description>提示文字</template>
    </i-steps-item>
  </i-steps>
</template>

显示代码复制代码复制代码

垂直状态

可通过 layout 设置为垂直步骤条：

步骤1

提示文字

步骤2

2

提示文字

步骤3

3

提示文字

步骤1

提示文字

步骤2

2

提示文字

步骤3

3

提示文字

<template>
  <div className="idesign-demo-block-row">
    <i-steps layout="vertical" :current="2">
      <i-steps-item>
        <template #title>步骤1</template>
        <template #description>提示文字</template>
      </i-steps-item>
      <i-steps-item>
        <template #title>步骤2</template>
        <template #description>提示文字</template>
      </i-steps-item>
      <i-steps-item>
        <template #title>步骤3</template>
        <template #description>提示文字</template>
      </i-steps-item>
    </i-steps>
    <i-steps layout="vertical" dot :current="2">
      <i-steps-item>
        <template #title>步骤1</template>
        <template #description>提示文字</template>
      </i-steps-item>
      <i-steps-item>
        <template #title>步骤2</template>
        <template #description>提示文字</template>
      </i-steps-item>
      <i-steps-item>
        <template #title>步骤3</template>
        <template #description>提示文字</template>
      </i-steps-item>
    </i-steps>
  </div>
</template>

显示代码复制代码复制代码

倒序步骤条

可通过 reverse 设置为倒序步骤条：

默认正向

步骤1

1

提示文字

步骤2

2

提示文字

步骤3

3

提示文字

反向顺序

步骤1

3

提示文字

步骤2

2

提示文字

步骤3

1

提示文字

<template>
  <h4>默认正向</h4>
  <i-steps>
    <i-steps-item>
      <template #title>步骤1</template>
      <template #description>提示文字</template>
    </i-steps-item>
    <i-steps-item>
      <template #title>步骤2</template>
      <template #description>提示文字</template>
    </i-steps-item>
    <i-steps-item>
      <template #title>步骤3</template>
      <template #description>提示文字</template>
    </i-steps-item>
  </i-steps>
  <h4>反向顺序</h4>
  <i-steps reverse>
    <i-steps-item>
      <template #title>步骤1</template>
      <template #description>提示文字</template>
    </i-steps-item>
    <i-steps-item>
      <template #title>步骤2</template>
      <template #description>提示文字</template>
    </i-steps-item>
    <i-steps-item>
      <template #title>步骤3</template>
      <template #description>提示文字</template>
    </i-steps-item>
  </i-steps>
</template>

显示代码复制代码复制代码

Steps Attributes

属性	说明	类型	默认值
current	进行到哪一步	number	0
layout	步骤条方向	horizontal〡vertical	horizontal
reverse	步骤条是否倒序	boolean	false
dot	是否为无序的步骤条	boolean	false

StepsItem Slots

插槽名	说明
title	步骤标题
description	步骤描述