21.elementUI之steps步骤条详解

前言：

近期项目有用到steps步骤条，第一次用，看了elementUI官方文档之后，结合项目代码（项目代码就不贴了，和官网差不多）做一下笔记记录一下，便于日后再次利用

首先先按着官网上的记一下笔记，顺便敲一下代码理解理解：

一、基础用法（简单步骤条）

先看官网上的图：

        
        
        

下一步

data:{
    active:0
},
methods:{
    next(){
        if(this.active++ >2){
            this.active = 0
        }
    }
}

从上边代码可以看出，设置了active属性，接收一个Number，表明步骤的index从0开始；需要定宽的步骤条时，设置space属性即可（下一个示例有设置），接收boolean，单位为px，如果不设置为自适应；设置finish-status属性可以改变已经完成的步骤条的状态，从官网得知，finish-status共有以下几个属性值：

二、含状态步骤条

三、有描述的步骤条（description）

四、居中的步骤条（align-center）（标题和描述都居中）

五、带图标的的步骤条（icon属性）

六、竖式步骤条（在el-steps中设置direction属性为vertical）

direction属性值默认为horizontal 即水平方向。

七、简洁风格的步骤条

设置simple可应用简洁风格，该条件下align-center、description、direction、space都将失效

补充：

process-status  设置当前步骤的状态   类型：string  可选值：wait / process / finish / error / success   默认：process