Steps步骤条 - 图1

Steps

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

何时使用

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

代码演示

Steps步骤条 - 图2

基本用法

简单的步骤条。

  1. <template>
  2.   <a-steps :current="1">
  3.     <a-step>
  4.       <!-- <span slot="title">Finished</span> -->
  5.       <template slot="title">
  6.         Finished
  7.       </template>
  8.       <span slot="description">This is a description.</span>
  9.     </a-step>
  10.     <a-step title="In Progress" sub-title="Left 00:00:08" description="This is a description." />
  11.     <a-step title="Waiting" description="This is a description." />
  12.   </a-steps>
  13. </template>

Steps步骤条 - 图3

迷你版

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

  1. <template>
  2.   <a-steps :current="1" size="small">
  3.     <a-step title="Finished" />
  4.     <a-step title="In Progress" />
  5.     <a-step title="Waiting" />
  6.   </a-steps>
  7. </template>

Steps步骤条 - 图4

带图标的步骤条

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

  1. <template>
  2.   <a-steps>
  3.     <a-step status="finish" title="Login">
  4.       <a-icon slot="icon" type="user" />
  5.     </a-step>
  6.     <a-step status="finish" title="Verification">
  7.       <a-icon slot="icon" type="solution" />
  8.     </a-step>
  9.     <a-step status="process" title="Pay">
  10.       <a-icon slot="icon" type="loading" />
  11.     </a-step>
  12.     <a-step status="wait" title="Done">
  13.       <a-icon slot="icon" type="smile-o" />
  14.     </a-step>
  15.   </a-steps>
  16. </template>

Steps步骤条 - 图5

步骤切换

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

  1. <template>
  2.   <div>
  3.     <a-steps :current="current">
  4.       <a-step v-for="item in steps" :key="item.title" :title="item.title" />
  5.     </a-steps>
  6.     <div class="steps-content">
  7.       {{ steps[current].content }}
  8.     </div>
  9.     <div class="steps-action">
  10.       <a-button v-if="current < steps.length - 1" type="primary" @click="next">
  11.         Next
  12.       </a-button>
  13.       <a-button
  14.         v-if="current == steps.length - 1"
  15.         type="primary"
  16.         @click="$message.success('Processing complete!')"
  17.       >
  18.         Done
  19.       </a-button>
  20.       <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
  21.         Previous
  22.       </a-button>
  23.     </div>
  24.   </div>
  25. </template>
  26. <script>
  27. export default {
  28.   data() {
  29.     return {
  30.       current: 0,
  31.       steps: [
  32.         {
  33.           title: 'First',
  34.           content: 'First-content',
  35.         },
  36.         {
  37.           title: 'Second',
  38.           content: 'Second-content',
  39.         },
  40.         {
  41.           title: 'Last',
  42.           content: 'Last-content',
  43.         },
  44.       ],
  45.     };
  46.   },
  47.   methods: {
  48.     next() {
  49.       this.current++;
  50.     },
  51.     prev() {
  52.       this.current--;
  53.     },
  54.   },
  55. };
  56. </script>
  57. <style scoped>
  58. .steps-content {
  59.   margin-top: 16px;
  60.   border: 1px dashed #e9e9e9;
  61.   border-radius: 6px;
  62.   background-color: #fafafa;
  63.   min-height: 200px;
  64.   text-align: center;
  65.   padding-top: 80px;
  66. }
  68. .steps-action {
  69.   margin-top: 24px;
  70. }
  71. </style>

Steps步骤条 - 图6

竖直方向的步骤条

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

  1. <template>
  2.   <a-steps direction="vertical" :current="1">
  3.     <a-step title="Finished" description="This is a description." />
  4.     <a-step title="In Progress" description="This is a description." />
  5.     <a-step title="Waiting" description="This is a description." />
  6.   </a-steps>
  7. </template>

Steps步骤条 - 图7

竖直方向的小型步骤条

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

  1. <template>
  2.   <a-steps direction="vertical" size="small" :current="1">
  3.     <a-step title="Finished" description="This is a description." />
  4.     <a-step title="In Progress" description="This is a description." />
  5.     <a-step title="Waiting" description="This is a description." />
  6.   </a-steps>
  7. </template>

Steps步骤条 - 图8

步骤运行错误

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

  1. <template>
  2.   <a-steps :current="1" status="error">
  3.     <a-step title="Finished" description="This is a description." />
  4.     <a-step title="In Progress" description="This is a description." />
  5.     <a-step title="Waiting" description="This is a description." />
  6.   </a-steps>
  7. </template>

Steps步骤条 - 图9

点状步骤条

包含步骤点的进度条。

  1. <template>
  2.   <div>
  3.     <a-steps progress-dot :current="1">
  4.       <a-step title="Finished" description="This is a description." />
  5.       <a-step title="In Progress" description="This is a description." />
  6.       <a-step title="Waiting" description="This is a description." />
  7.     </a-steps>
  8.     <a-divider />
  9.     <a-steps progress-dot :current="1" direction="vertical">
  10.       <a-step title="Finished" description="This is a description. This is a description." />
  11.       <a-step title="Finished" description="This is a description. This is a description." />
  12.       <a-step title="In Progress" description="This is a description. This is a description." />
  13.       <a-step title="Waiting" description="This is a description." />
  14.       <a-step title="Waiting" description="This is a description." />
  15.     </a-steps>
  16.   </div>
  17. </template>

Steps步骤条 - 图10

自定义点状步骤条

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

  1. <template>
  2.   <div>
  3.     <a-steps :current="1">
  4.       <a-popover slot="progressDot" slot-scope="{ index, status, prefixCls }">
  5.         <template slot="content">
  6.           <span>step {{ index }} status: {{ status }}</span>
  7.         </template>
  8.         <span :class="`${prefixCls}-icon-dot`" />
  9.       </a-popover>
  10.       <a-step title="Finished" description="You can hover on the dot." />
  11.       <a-step title="In Progress" description="You can hover on the dot." />
  12.       <a-step title="Waiting" description="You can hover on the dot." />
  13.       <a-step title="Waiting" description="You can hover on the dot." />
  14.     </a-steps>
  15.   </div>
  16. </template>

Steps步骤条 - 图11

可点击

设置 @change 后，Steps 变为可点击状态。

  1. <template>
  2.   <div>
  3.     <a-steps :current="current" @change="onChange">
  4.       <a-step title="Step 1" description="This is a description." />
  5.       <a-step title="Step 2" description="This is a description." />
  6.       <a-step title="Step 3" description="This is a description." />
  7.     </a-steps>
  8.     <a-divider />
  9.     <a-steps v-model="current" direction="vertical">
  10.       <a-step title="Step 1" description="This is a description." />
  11.       <a-step title="Step 2" description="This is a description." />
  12.       <a-step title="Step 3" description="This is a description." />
  13.     </a-steps>
  14.   </div>
  15. </template>
  16. <script>
  17. export default {
  18.   data() {
  19.     return {
  20.       current: 0,
  21.     };
  22.   },
  23.   methods: {
  24.     onChange(current) {
  25.       console.log('onChange:', current);
  26.       this.current = current;
  27.     },
  28.   },
  29. };
  30. </script>

Steps步骤条 - 图12

导航步骤

导航类型的步骤条。

  1. <template>
  2.   <div>
  3.     <a-steps v-model="current" type="navigation" size="small" :style="stepStyle">
  4.       <a-step
  5.         title="Step 1"
  6.         sub-title="00:00:05"
  7.         status="finish"
  8.         description="This is a description."
  9.       />
  10.       <a-step
  11.         title="Step 2"
  12.         sub-title="00:01:02"
  13.         status="process"
  14.         description="This is a description."
  15.       />
  16.       <a-step
  17.         title="Step 3"
  18.         sub-title="waiting for longlong time"
  19.         status="wait"
  20.         description="This is a description."
  21.       />
  22.     </a-steps>
  23.     <a-steps v-model="current" type="navigation" :style="stepStyle">
  24.       <a-step status="finish" title="Step 1" />
  25.       <a-step status="process" title="Step 2" />
  26.       <a-step status="wait" title="Step 3" />
  27.       <a-step status="wait" title="Step 4" />
  28.     </a-steps>
  29.     <a-steps v-model="current" type="navigation" size="small" :style="stepStyle">
  30.       <a-step status="finish" title="finish 1" />
  31.       <a-step status="finish" title="finish 2" />
  32.       <a-step status="process" title="current process" />
  33.       <a-step status="wait" title="wait" disabled />
  34.     </a-steps>
  35.   </div>
  36. </template>
  37. <script>
  38. export default {
  39.   data() {
  40.     return {
  41.       current: 0,
  42.       stepStyle: {
  43.         marginBottom: '60px',
  44.         boxShadow: '0px -1px 0 0 #e8e8e8 inset',
  45.       },
  46.     };
  47.   },
  48. };
  49. </script>

Steps

整体步骤条。

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

Steps 事件

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

Steps.Step

步骤条内的每一个步骤。

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