Steps 步骤条

概述

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

使用指南

在.vue中引入组件

<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中引入样式文件

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

示例

基本用法

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

<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