# Steps 步骤条

## 概述

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

## 使用指南

在.vue中引入组件

```javascript
<script>
    import iSteps from 'iview-mpvue/dist/components/steps/steps'
    import iStep from 'iview-mpvue/dist/components/step/step'
    export default {
        components: {
            'i-steps': iSteps,
            'i-step': iStep
        }
    }
</script>
```

在main.js中引入样式文件

```javascript
import 'iview-mpvue/dist/components/step/style/css'
import 'iview-mpvue/dist/components/steps/style/css'
```

## 示例

```markup
基本用法

<i-steps>
    <i-step status="finish">
        <div slot="title" order="0">
              已完成
        </div>
        <div slot="content">
            这里是该步骤的描述信息
        </div>
    </i-step>
    <i-step status="process" order="1">
        <div slot="title">
            进行中
        </div>
        <div slot="content">
            这里是该步骤的描述信息
        </div>
    </i-step>
    <i-step status="" order="2">
        <div slot="title">
            错误
        </div>
        <div slot="content">
            这里是该步骤的描述信息
        </div>
    </i-step>
</i-steps>

使用 icon 图标

<i-steps>
    <i-step status="finish" icon="barrage" order="0">
        <div slot="title">
              已完成
        </div>
        <div slot="content">
            这里是该步骤的描述信息
        </div>
    </i-step>
    <i-step status="process" icon="brush" order="1">
        <div slot="title">
            进行中
        </div>
        <div slot="content" icon="camera">
            这里是该步骤的描述信息
        </div>
    </i-step>
    <i-step icon="collection" order="2">
        <div slot="title">
            错误
        </div>
        <div slot="content">
            这里是该步骤的描述信息
        </div>
    </i-step>
</i-steps>

步骤进度

<i-steps :current="current">
    <i-step order="0">
        <div slot="title">
              已完成
        </div>
        <div slot="content">
            这里是该步骤的描述信息
        </div>
    </i-step>
    <i-step order="1">
        <div slot="title">
            进行中
        </div>
        <div slot="content">
            这里是该步骤的描述信息
        </div>
    </i-step>
    <i-step order="2">
        <div slot="title">
            错误
        </div>
        <div slot="content">
            这里是该步骤的描述信息
        </div>
    </i-step>
</i-steps>
<i-button bindclick="handleClick">下一步</i-button>

垂直方向

<i-steps :current="verticalCurrent" direction="vertical">
    <i-step order="0">
        <div slot="title">
              已完成
        </div>
        <div slot="content">
            这里是该步骤的描述信息
        </div>
    </i-step>
    <i-step order="1">
        <div slot="title">
            进行中
        </div>
        <div slot="content">
            这里是该步骤的描述信息
        </div>
    </i-step>
    <i-step order="2">
        <div slot="title">
            错误
        </div>
        <div slot="content">
            这里是该步骤的描述信息
        </div>
    </i-step>
</i-steps>
```

```javascript
<script>
    export default {
        ...
        data() {
            return {
                current : 2,
                verticalCurrent : 2
            }
        },
        methods: {
            handleClick() {
                const addCurrent = this.current + 1
                const current = addCurrent > 2 ? 0 : addCurrent
                this.current = current
            }
        }
    }
</script>
```

## API

Steps properties

| 属性        | 说明                                       | 类型     | 默认值        |
| --------- | ---------------------------------------- | ------ | ---------- |
| i-class   | 自定义 class 类名                             | String | -          |
| current   | 当前步骤，从 0 开始计数                            | Number | -1         |
| status    | 当前步骤的状态，可选值为 wait、process、finish、error   | String | -          |
| direction | 步骤条的方向，可选值为 horizontal（水平）或 vertical（垂直） | String | horizontal |

Step properties

| 属性      | 说明                                            | 类型     | 默认值 |
| ------- | --------------------------------------------- | ------ | --- |
| i-class | 自定义 class 类名                                  | String | -   |
| status  | 步骤的状态，可选值为 wait、process、finish、error，不设置时自动判断 | String | -   |
| title   | 标题                                            | String | -   |
| content | 步骤的详细描述，可选                                    | String | -   |
| icon    | 步骤的图标，可选                                      | String | -   |
| order   | 当前step索引顺序                                    | Number | 0   |

