Steps

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

何时使用

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

代码演示

Steps步骤条 - 图1

基本用法

简单的步骤条。

  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步骤条 - 图2

迷你版

迷你版的步骤条,通过设置 <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步骤条 - 图3

带图标的步骤条

通过设置 Steps.Stepicon 属性,可以启用自定义图标。

  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步骤条 - 图4

步骤切换

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

  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. }
  67. .steps-action {
  68. margin-top: 24px;
  69. }
  70. </style>

Steps步骤条 - 图5

竖直方向的步骤条

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

  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步骤条 - 图6

竖直方向的小型步骤条

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

  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步骤条 - 图7

步骤运行错误

使用 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步骤条 - 图8

点状步骤条

包含步骤点的进度条。

  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步骤条 - 图9

自定义点状步骤条

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

  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步骤条 - 图10

可点击

设置 @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步骤条 - 图11

导航步骤

导航类型的步骤条。

  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步骤条类型,有 defaultnavigation 两种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)和迷你(smallstringdefault
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