# 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   |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://iview-mpvue.gitbook.io/iview-mpvue/dao-hang/steps-bu-zhou-tiao.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.