Steps 步骤条

概述

拆分某项流程的步骤,引导用户按流程完成任务。

代码示例

Steps 步骤条 - 图1

基础用法

基本用法,组件会根据current自动判断各步骤状态。

  1. <template>
  2. <Steps :current="1">
  3. <Step title="已完成" content="这里是该步骤的描述信息"></Step>
  4. <Step title="进行中" content="这里是该步骤的描述信息"></Step>
  5. <Step title="待进行" content="这里是该步骤的描述信息"></Step>
  6. <Step title="待进行" content="这里是该步骤的描述信息"></Step>
  7. </Steps>
  8. </template>
  9. <script>
  10. export default {
  11. }
  12. </script>

Steps 步骤条 - 图2

迷你版

设置属性sizesmall启用迷你版。

  1. <template>
  2. <Steps :current="2" size="small">
  3. <Step title="已完成"></Step>
  4. <Step title="进行中"></Step>
  5. <Step title="待进行"></Step>
  6. <Step title="待进行"></Step>
  7. </Steps>
  8. </template>
  9. <script>
  10. export default {
  11. }
  12. </script>

Steps 步骤条 - 图3

带图标的步骤条

通过设置Stepicon属性可以自定义图标。

  1. <template>
  2. <Steps :current="1">
  3. <Step title="注册" icon="ios-person"></Step>
  4. <Step title="上传头像" icon="ios-camera"></Step>
  5. <Step title="验证邮箱" icon="ios-mail"></Step>
  6. </Steps>
  7. </template>
  8. <script>
  9. export default {
  10. }
  11. </script>

Steps 步骤条 - 图4

切换步骤

点击下一步按钮可以切换当前进度状态。

  1. <template>
  2. <p>当前正在进行第 {{ current + 1 }} 步</p>
  3. <Steps :current="current">
  4. <Step title="步骤1"></Step>
  5. <Step title="步骤2"></Step>
  6. <Step title="步骤3"></Step>
  7. <Step title="步骤4"></Step>
  8. </Steps>
  9. <Button type="primary" @click="next">Next step</Button>
  10. </template>
  11. <script>
  12. export default {
  13. data () {
  14. return {
  15. current: 0
  16. }
  17. },
  18. methods: {
  19. next () {
  20. if (this.current == 3) {
  21. this.current = 0;
  22. } else {
  23. this.current += 1;
  24. }
  25. }
  26. }
  27. }
  28. </script>

Steps 步骤条 - 图5

垂直方向

设置属性directionvertical在垂直方向展示。

  1. <template>
  2. <Steps :current="2" direction="vertical">
  3. <Step title="已完成" content="这里是该步骤的描述信息"></Step>
  4. <Step title="已完成" content="这里是该步骤的描述信息"></Step>
  5. <Step title="进行中" content="这里是该步骤的描述信息"></Step>
  6. <Step title="待进行" content="这里是该步骤的描述信息"></Step>
  7. </Steps>
  8. </template>
  9. <script>
  10. export default {
  11. }
  12. </script>

Steps 步骤条 - 图6

步骤运行错误

设置Steps的属性statuserror指定当前步骤状态。

  1. <template>
  2. <Steps :current="1" status="error">
  3. <Step title="已完成" content="这里是该步骤的描述信息"></Step>
  4. <Step title="进行中" content="这里是该步骤的描述信息"></Step>
  5. <Step title="待进行" content="这里是该步骤的描述信息"></Step>
  6. <Step title="待进行" content="这里是该步骤的描述信息"></Step>
  7. </Steps>
  8. </template>
  9. <script>
  10. export default {
  11. }
  12. </script>

API

Steps props

属性说明类型默认值
current当前步骤,从 0 开始计数Number0
status当前步骤的状态,可选值为waitprocessfinisherrorStringprocess
size步骤条的尺寸,可选值为small或者不写String-
direction步骤条的方向,可选值为horizontal(水平)或vertical(垂直)Stringhorizontal

Step props

属性说明类型默认值
status步骤的状态,可选值为waitprocessfinisherror,不设置时自动判断Stringprocess
title标题String
content步骤的详细描述,可选String-
icon步骤的图标,可选String-

Step slot

名称说明
title 4.0.0自定义 title
content 4.0.0自定义 content
icon 4.0.0自定义 icon