Steps 步骤条请使用手机扫码体验

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

基本用法

正常流程

  1. html
    <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. html
    <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>

Prop

nut-steps

字段说明类型默认值
current当前所在的步骤Number0
status流程状态String"process"（可选值 "wait"、"process"、"finish"、"error"）

nut-step

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