Question

import { Steps,Step } from 'feui';
components: {
  [Steps.name]: Steps,
  [Step.name]: Step
}

代码演示

基础用法

<fe-steps :active="active">
  <fe-step>买家下单</fe-step>
  <fe-step>商家接单</fe-step>
  <fe-step>买家提货</fe-step>
  <fe-step>交易完成</fe-step>
</fe-steps>

添加图标、标题和描述

<fe-steps
  :active="active"
  icon="download"
  icon-class="steps-success"
  title="大象放冰箱"
  description="要把大象放冰箱,总共分几步" >
  <fe-step>第一步，把冰箱门打开</fe-step>
  <fe-step>第二步，把大象放冰箱</fe-step>
  <fe-step>第三步，把冰箱门关上</fe-step>
</fe-steps>

横向模式

<fe-steps direction="vertical" :active="0" active-color="#f60">
  <fe-step>
    <h3>派件中</h3>
    <p>2018-01-12 12:40</p>
  </fe-step>
  <fe-step>
    <h3>已到达杭州</h3>
    <p>2018-01-11 10:05</p>
  </fe-step>
  <fe-step>
    <h3>已到达浙江</h3>
    <p>2018-01-10 09:30</p>
  </fe-step>
  <fe-step>
    <h3>已收件</h3>
    <p>2018-01-09 18:30</p>
  </fe-step>
</fe-steps>

API

参数	说明	类型	默认值	可选值
active	当前步骤，起始值为0	Number	-	-
title	当前步骤标题	String	-	-
text	当前步骤描述	String	-	-
description	显示的文字	String	-	-
icon	当前步骤的icon	String	-	-
icon-class	当前步骤栏为icon添加的类	String	-	-
direction	显示方向	String	horizontal	horizontal、vertical
active-color	active状态颜色	String	#4a90e2	-

Slots

Slot名	说明	备注
icon	自定义icon区域	-
message-extra	状态栏添加额外的元素	-