Steps 步骤条

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

代码演示

基础用法

简单的步骤条。

Finished

This is a description.

In Progress

Left 00:00:08

This is a description.

Waiting

This is a description.

vue

<template>
  <a-steps
    :current="1"
    :items="[
      {
        title: 'Finished',
        description,
      },
      {
        title: 'In Progress',
        description,
        subTitle: 'Left 00:00:08',
      },
      {
        title: 'Waiting',
        description,
      },
    ]"
  ></a-steps>
</template>
<script setup>
const description = 'This is a description.';
</script>

步骤切换

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

First

Second

Last

First-content

vue

<template>
  <div>
    <a-steps :current="current" :items="items"></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 setup>
import { ref } from 'vue';
const current = ref(0);
const next = () => {
  current.value++;
};
const prev = () => {
  current.value--;
};
const steps = [
  {
    title: 'First',
    content: 'First-content',
  },
  {
    title: 'Second',
    content: 'Second-content',
  },
  {
    title: 'Last',
    content: 'Last-content',
  },
];
const items = steps.map(item => ({
  key: item.title,
  title: item.title,
}));
</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;
}

[data-theme='dark'] .steps-content {
  background-color: #2f2f2f;
  border: 1px dashed #404040;
}
</style>

竖直方向的步骤条

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

Finished

This is a description.

In Progress

This is a description.

Waiting

This is a description.

vue

<template>
  <a-steps
    direction="vertical"
    :current="1"
    :items="[
      {
        title: 'Finished',
        description,
      },
      {
        title: 'In Progress',
        description,
      },
      {
        title: 'Waiting',
        description,
      },
    ]"
  ></a-steps>
</template>
<script setup>
const description = 'This is a description.';
</script>

步骤运行错误

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

Finished

This is a description.

In Process

This is a description.

Waiting

This is a description.

vue

<template>
  <a-steps
    v-model:current="current"
    status="error"
    :items="[
      {
        title: 'Finished',
        description,
      },
      {
        title: 'In Process',
        description,
      },
      {
        title: 'Waiting',
        description,
      },
    ]"
  ></a-steps>
</template>
<script setup>
import { ref } from 'vue';
const current = ref(1);
const description = 'This is a description.';
</script>

可点击

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

Step 1

This is a description.

Step 2

This is a description.

Step 3

This is a description.

Step 1

This is a description.

Step 2

This is a description.

Step 3

This is a description.

vue

<template>
  <div>
    <a-steps
      v-model:current="current"
      :items="[
        {
          title: 'Step 1',
          description,
        },
        {
          title: 'Step 2',
          description,
        },
        {
          title: 'Step 3',
          description,
        },
      ]"
    ></a-steps>
    <a-divider />
    <a-steps
      v-model:current="current"
      direction="vertical"
      :items="[
        {
          title: 'Step 1',
          description,
        },
        {
          title: 'Step 2',
          description,
        },
        {
          title: 'Step 3',
          description,
        },
      ]"
    ></a-steps>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const current = ref(0);
const description = 'This is a description.';
</script>

带有进度的步骤

带有进度的步骤。

Finished

This is a description.

In Progress

Left 00:00:08

This is a description.

Waiting

This is a description.

Finished

This is a description.

In Progress

Left 00:00:08

This is a description.

Waiting

This is a description.

vue

<template>
  <a-steps
    v-model:current="current"
    :percent="60"
    :items="[
      {
        title: 'Finished',
        description,
      },
      {
        title: 'In Progress',
        subTitle: 'Left 00:00:08',
        description,
      },
      {
        title: 'Waiting',
        description,
      },
    ]"
  ></a-steps>
  <a-steps
    v-model:current="current"
    :percent="60"
    size="small"
    :items="[
      {
        title: 'Finished',
        description,
      },
      {
        title: 'In Progress',
        subTitle: 'Left 00:00:08',
        description,
      },
      {
        title: 'Waiting',
        description,
      },
    ]"
  ></a-steps>
</template>
<script setup>
import { ref } from 'vue';
const current = ref(1);
const description = 'This is a description.';
</script>

API

Steps

整体步骤条。

参数	说明	类型	默认值
current	(v-model) 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态	number	0
direction	指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向	string	horizontal
initial	起始序号，从 0 开始记数	number	0
labelPlacement	指定标签放置位置，默认水平放图标右侧，可选`vertical`放图标下方	string	horizontal
percent	当前 `process` 步骤显示的进度条进度（只对基本类型的 Steps 生效）	number	-
progressDot	点状步骤条，可以设置为一个作用域插槽,labelPlacement 将强制为`vertical`	Boolean or v-slot:progressDot="{index, status, title, description, prefixCls, iconDot}"	false
responsive	当屏幕宽度小于 532px 时自动变为垂直模式	boolean	true
size	指定大小，目前支持普通（`default`）和迷你（`small`）	string	default
status	指定当前步骤的状态，可选 `wait` `process` `finish` `error`	string	process
type	步骤条类型，有 `default` 和 `navigation` 两种	string	default
items	配置选项卡内容	StepItem[]	[]

type="inline"

参数	说明	类型	默认值
current	指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态	number	0
initial	起始序号，从 0 开始记数	number	0
status	指定当前步骤的状态，可选 `wait` `process` `finish` `error`	string	process
items	配置选项卡内容，不支持 `icon` `subtitle`	StepItem	[]

Steps 事件

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

Steps.Step

步骤条内的每一个步骤。

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

Steps 步骤条 ​

代码演示 ​

基础用法 ​

步骤切换 ​

竖直方向的步骤条 ​

步骤运行错误 ​

可点击 ​

带有进度的步骤 ​

API ​

Steps ​

type="inline" ​

Steps 事件 ​

Steps.Step ​

Steps 步骤条

代码演示

基础用法

步骤切换

竖直方向的步骤条

步骤运行错误

可点击

带有进度的步骤

API

Steps

type="inline"

Steps 事件

Steps.Step