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