Steps 步骤条

引导用户按照流程完成任务的导航条。

何时使用

当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。

代码演示

Finished
This is a description.
2
In Progress
Left 00-00-08
This is a description.
3
Waiting
This is a description.
基本用法

简单的步骤条。

<template>
  <a-steps :current="1">
    <a-step>
      <!-- <span slot="title">Finished</span> -->
      <template #title>Finished</template>
      <template #description>
        <span>This is a description.</span>
      </template>
    </a-step>
    <a-step title="In Progress" sub-title="Left 00:00:08" description="This is a description." />
    <a-step title="Waiting" description="This is a description." />
  </a-steps>
</template>
Finished
2
In Progress
3
Waiting
迷你版

迷你版的步骤条，通过设置 <Steps size="small"> 启用.

<template>
  <a-steps :current="1" size="small">
    <a-step title="Finished" />
    <a-step title="In Progress" />
    <a-step title="Waiting" />
  </a-steps>
</template>
Login
Verification
Pay
Done
带图标的步骤条

通过设置 Steps.Step 的 icon 属性，可以启用自定义图标。

<template>
  <a-steps>
    <a-step status="finish" title="Login">
      <template #icon>
        <user-outlined />
      </template>
    </a-step>
    <a-step status="finish" title="Verification">
      <template #icon>
        <solution-outlined />
      </template>
    </a-step>
    <a-step status="process" title="Pay">
      <template #icon>
        <loading-outlined />
      </template>
    </a-step>
    <a-step status="wait" title="Done">
      <template #icon>
        <smile-outlined />
      </template>
    </a-step>
  </a-steps>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import {
  UserOutlined,
  SolutionOutlined,
  LoadingOutlined,
  SmileOutlined,
} from '@ant-design/icons-vue';  export default defineComponent({
  components: {
    UserOutlined,
    SolutionOutlined,
    LoadingOutlined,
    SmileOutlined,
  },
});
</script>
1
First
2
Second
3
Last
First-content
步骤切换

通常配合内容及按钮使用，表示一个流程的处理进度。

<template>
  <div>
    <a-steps :current="current">
      <a-step v-for="item in steps" :key="item.title" :title="item.title" />
    </a-steps>
    <div class="steps-content">
      {{ steps[current].content }}
    </div>
    <div class="steps-action">
      <a-button v-if="current < steps.length - 1" type="primary" @click="next">Next</a-button>
      <a-button
        v-if="current == steps.length - 1"
        type="primary"
        @click="$message.success('Processing complete!')"
      >
        Done
      </a-button>
      <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">Previous</a-button>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';  export default defineComponent({
  setup() {
    const current = ref<number>(0);
    const next = () => {
      current.value++;
    };
    const prev = () => {
      current.value--;
    };
    return {
      current,
      steps: [
        {
          title: 'First',
          content: 'First-content',
        },
        {
          title: 'Second',
          content: 'Second-content',
        },
        {
          title: 'Last',
          content: 'Last-content',
        },
      ],
      next,
      prev,
    };
  },
});
</script>
<style scoped>
.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}  .steps-action {
  margin-top: 24px;
}
</style>
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.
竖直方向的步骤条

简单的竖直方向的步骤条。

<template>
  <a-steps direction="vertical" :current="1">
    <a-step title="Finished" description="This is a description." />
    <a-step title="In Progress" description="This is a description." />
    <a-step title="Waiting" description="This is a description." />
  </a-steps>
</template>
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.
竖直方向的小型步骤条

简单的竖直方向的小型步骤条。

<template>
  <a-steps direction="vertical" size="small" :current="1">
    <a-step title="Finished" description="This is a description." />
    <a-step title="In Progress" description="This is a description." />
    <a-step title="Waiting" description="This is a description." />
  </a-steps>
</template>
Finished
This is a description.
In Progress
This is a description.
3
Waiting
This is a description.
步骤运行错误

使用 Steps 的 status 属性来指定当前步骤的状态。

<template>
  <a-steps :current="1" status="error">
    <a-step title="Finished" description="This is a description." />
    <a-step title="In Progress" description="This is a description." />
    <a-step title="Waiting" description="This is a description." />
  </a-steps>
</template>
Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.
Finished
This is a description. This is a description.
Finished
This is a description. This is a description.
In Progress
This is a description. This is a description.
Waiting
This is a description.
Waiting
This is a description.
点状步骤条

包含步骤点的进度条。

<template>
  <div>
    <a-steps progress-dot :current="1">
      <a-step title="Finished" description="This is a description." />
      <a-step title="In Progress" description="This is a description." />
      <a-step title="Waiting" description="This is a description." />
    </a-steps>
    <a-divider />
    <a-steps progress-dot :current="1" direction="vertical">
      <a-step title="Finished" description="This is a description. This is a description." />
      <a-step title="Finished" description="This is a description. This is a description." />
      <a-step title="In Progress" description="This is a description. This is a description." />
      <a-step title="Waiting" description="This is a description." />
      <a-step title="Waiting" description="This is a description." />
    </a-steps>
  </div>
</template>
Finished
You can hover on the dot.
In Progress
You can hover on the dot.
Waiting
You can hover on the dot.
Waiting
You can hover on the dot.
自定义点状步骤条

为点状步骤条增加自定义展示。

<template>
  <div>
    <a-steps :current="1">
      <template #progressDot="{ index, status, prefixCls }">
        <a-popover>
          <template #content>
            <span>step {{ index }} status: {{ status }}</span>
          </template>
          <span :class="`${prefixCls}-icon-dot`" />
        </a-popover>
      </template>
      <a-step title="Finished" description="You can hover on the dot." />
      <a-step title="In Progress" description="You can hover on the dot." />
      <a-step title="Waiting" description="You can hover on the dot." />
      <a-step title="Waiting" description="You can hover on the dot." />
    </a-steps>
  </div>
</template>
1
Step 1
This is a description.
2
Step 2
This is a description.
3
Step 3
This is a description.
1
Step 1
This is a description.
2
Step 2
This is a description.
3
Step 3
This is a description.
可点击

设置 v-model 后，Steps 变为可点击状态。

<template>
  <div>
    <a-steps v-model:current="current">
      <a-step title="Step 1" description="This is a description." />
      <a-step title="Step 2" description="This is a description." />
      <a-step title="Step 3" description="This is a description." />
    </a-steps>
    <a-divider />
    <a-steps v-model:current="current" direction="vertical">
      <a-step title="Step 1" description="This is a description." />
      <a-step title="Step 2" description="This is a description." />
      <a-step title="Step 3" description="This is a description." />
    </a-steps>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';  export default defineComponent({
  setup() {
    const current = ref<number>(0);     return {
      current,
    };
  },
});
</script>
Step 1
00:00:05
This is a description.
2
Step 2
00:01:02
This is a description.
3
Step 3
waiting for longlong time
This is a description.
Step 1
2
Step 2
3
Step 3
4
Step 4
finish 1
finish 2
3
current process
4
wait
导航步骤

导航类型的步骤条。

<template>
  <div>
    <a-steps v-model:current="current" type="navigation" size="small" :style="stepStyle">
      <a-step
        title="Step 1"
        sub-title="00:00:05"
        status="finish"
        description="This is a description."
      />
      <a-step
        title="Step 2"
        sub-title="00:01:02"
        status="process"
        description="This is a description."
      />
      <a-step
        title="Step 3"
        sub-title="waiting for longlong time"
        status="wait"
        description="This is a description."
      />
    </a-steps>
    <a-steps v-model:current="current" type="navigation" :style="stepStyle">
      <a-step status="finish" title="Step 1" />
      <a-step status="process" title="Step 2" />
      <a-step status="wait" title="Step 3" />
      <a-step status="wait" title="Step 4" />
    </a-steps>
    <a-steps v-model:current="current" type="navigation" size="small" :style="stepStyle">
      <a-step status="finish" title="finish 1" />
      <a-step status="finish" title="finish 2" />
      <a-step status="process" title="current process" />
      <a-step status="wait" title="wait" disabled />
    </a-steps>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'; export default defineComponent({
  setup() {
    const current = ref<number>(0);
    return {
      current,
      stepStyle: {
        marginBottom: '60px',
        boxShadow: '0px -1px 0 0 #e8e8e8 inset',
      },
    };
  },
});
</script>

API#

<a-steps>
  <a-step title="第一步" />
  <a-step title="第二步" />
  <a-step title="第三步" />
</a-steps>

Steps

整体步骤条。

参数 说明 类型 默认值 版本
type 步骤条类型，有 default 和 navigation 两种 string default 1.5.0
current (v-model) 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态, 1.5.0 后支持 v-model number 0
direction 指定步骤条方向。目前支持水平（horizontal）和竖直（vertical）两种方向 string horizontal
labelPlacement 指定标签放置位置，默认水平放图标右侧，可选vertical放图标下方 string horizontal
progressDot 点状步骤条，可以设置为一个 作用域插槽,labelPlacement 将强制为vertical Boolean or slot="progressDot" slot-scope="{index, status, title, description, prefixCls})" false
size 指定大小，目前支持普通（default）和迷你（small） string default
status 指定当前步骤的状态，可选 wait process finish error string process
initial 起始序号，从 0 开始记数 number 0

Steps 事件

事件名称 说明 回调参数 版本
change 点击切换步骤时触发 (current) => void -

Steps.Step

步骤条内的每一个步骤。

参数 说明 类型 默认值 版本
description 步骤的详情描述，可选 string | slot -
icon 步骤图标的类型，可选 string | slot -
status 指定状态。当不配置该属性时，会使用 Steps 的 current 来自动指定状态。可选：wait process finish error string wait
title 标题 string | slot -
subTitle 子标题 string | slot - 1.5.0
disabled 禁用点击 boolean false 1.5.0