Steps 步骤条

拆分展示某项流程的步骤,引导用户按流程完成任务或向用户展示当前状态。

按需加载方法

  1. import { Steps } from '@nutui/nutui';
  2. Steps.Steps.install(Vue);
  3. Steps.Step.install(Vue);

基本用法

正常流程

  1. <nut-steps
  2. :current="current"
  3. >
  4. <nut-step
  5. title="已完成"
  6. content="这里是该步骤的描述信息"
  7. >
  8. </nut-step>
  9. <nut-step
  10. title="已完成"
  11. content="这里是该步骤的描述信息"
  12. >
  13. </nut-step>
  14. <nut-step
  15. title="进行中"
  16. content="这里是该步骤的描述信息"
  17. >
  18. </nut-step>
  19. <nut-step
  20. title="待进行"
  21. content="这里是该步骤的描述信息"
  22. >
  23. </nut-step>
  24. <nut-step
  25. title="待进行"
  26. content="这里是该步骤的描述信息"
  27. >
  28. </nut-step>
  29. </nut-steps>

流程终止

  1. <nut-steps
  2. :current="current"
  3. status="error"
  4. >
  5. <nut-step
  6. title="已完成"
  7. content="这里是该步骤的描述信息"
  8. >
  9. </nut-step>
  10. <nut-step
  11. title="已完成"
  12. content="这里是该步骤的描述信息"
  13. >
  14. </nut-step>
  15. <nut-step
  16. title="进行中"
  17. content="这里是该步骤的描述信息"
  18. >
  19. </nut-step>
  20. <nut-step
  21. title="待进行"
  22. content="这里是该步骤的描述信息"
  23. >
  24. </nut-step>
  25. <nut-step
  26. title="待进行"
  27. content="这里是该步骤的描述信息"
  28. >
  29. </nut-step>
  30. </nut-steps>

动态加载(2s后渲染)

  1. <nut-steps :current="current2" status="error" :source="titles">
  2. <nut-step :key="index" v-for="(item,index) in titles" :title="item" content="这里是该步骤的描述信息"></nut-step>
  3. </nut-steps>
  1. export default {
  2. components: {},
  3. data() {
  4. return {
  5. current: 3,
  6. titles: [],
  7. current2: 0
  8. };
  9. },
  10. mounted() {
  11. setTimeout(() => {
  12. this.titles = ["已完成", "已完成", "进行中"];
  13. this.current2 = 3;
  14. }, 2000);
  15. },
  16. methods: {
  17. next() {
  18. this.current = this.current + 1;
  19. }
  20. }
  21. };

Prop

nut-steps

字段说明类型默认值
current当前所在的步骤Number0
status流程状态String“process”(可选值 “wait”、”process”、”finish”、”error”)
source异步数据渲染nut-step时,必须绑定对应数组Array-

nut-step

字段说明类型默认值
title流程步骤的titleString步骤
content流程步骤的contentString步骤描述

Steps 步骤条 - 图1