038_Steps步骤条

1. Steps步骤条

1.1. Steps步骤条引导用户按照流程完成任务的分步导航条, 可根据实际应用场景设定步骤, 步骤不得少于2步。

1.2. Steps Attributes

参数	说明	类型	可选值	默认值
space	每个step的间距, 不填写将自适应间距。支持百分比。	number / string	无	无
direction	显示方向	string	vertical/horizontal	horizontal
active	设置当前激活步骤	number	无	0
process-status	设置当前步骤的状态	string	wait / process / finish / error / success	process
finish-status	设置结束步骤的状态	string	wait / process / finish / error / success	finish
align-center	进行居中对齐	boolean	无	false
simple	是否应用简洁风格	boolean	无	false

1.3. Step Attributes

参数	说明	类型	可选值
title	标题	string	无
description	描述性文字	string	无
icon	图标	传入icon的class全名来自定义icon, 也支持slot方式写入	string
status	设置当前步骤的状态, 不设置则根据steps确定状态	wait / process / finish / error / success	无

1.4. Step Slot

Name	说明
icon	自定义图标
title	自定义标题
description	自定义描述性文字

2. Steps步骤条例子

2.1. 使用脚手架新建一个名为element-ui-steps的前端项目, 同时安装Element插件。

2.2. 编辑index.js 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Steps from '../components/Steps.vue'
import TitleSteps from '../components/TitleSteps.vue'
import DescriptionSteps from '../components/DescriptionSteps.vue'
import IconSteps from '../components/IconSteps.vue'
import VerticalSteps from '../components/VerticalSteps.vue'
import SimpleSteps from '../components/SimpleSteps.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Steps' },
  { path: '/Steps', component: Steps },
  { path: '/TitleSteps', component: TitleSteps },
  { path: '/DescriptionSteps', component: DescriptionSteps },
  { path: '/IconSteps', component: IconSteps },
  { path: '/VerticalSteps', component: VerticalSteps },
  { path: '/SimpleSteps', component: SimpleSteps }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建Steps.vue

<template>
  <div>
    <h1>基础用法</h1>
    <h4>设置active属性, 接受一个Number, 表明步骤的index, 从0开始。需要定宽的步骤条时, 设置space属性即可, 它接受Number, 单位为px, 如果不设置, 则为自适应。设置finish-status属性可以改变已经完成的步骤的状态。</h4>
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>

    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0
    }
  },
  methods: {
    next () {
      if (this.active++ > 2) this.active = 0
    }
  }
}
</script>

2.4. 在components下创建TitleSteps.vue

<template>
  <div>
    <h1>含状态步骤条</h1>
    <h4>也可以使用title具名分发, 可以用slot的方式来取代属性的设置, 在本文档最后的列表中有所有的slot name可供参考。</h4>
    <el-steps :space="200" :active="1" finish-status="success">
      <el-step title="已完成"></el-step>
      <el-step title="进行中"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>
  </div>
</template>

2.5. 在components下创建DescriptionSteps.vue

<template>
  <div>
    <h1>有描述的步骤条</h1>
    <h4>description设置每个步骤有其对应的步骤状态描述。</h4>
    <el-steps :active="1">
      <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
      <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
      <el-step title="步骤 3" description="这段就没那么长了"></el-step>
    </el-steps>
    <h1>居中的步骤条</h1>
    <h4>align-center进行居中对齐, 标题和描述都将居中。</h4>
    <el-steps :active="2" align-center>
      <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
      <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
      <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
      <el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
    </el-steps>
  </div>
</template>

2.6. 在components下创建IconSteps.vue

<template>
  <div>
    <h1>带图标的步骤条</h1>
    <h4>通过icon属性来设置图标, 图标的类型可以参考Icon组件的文档, 除此以外, 还能通过具名slot来使用自定义的图标。</h4>
    <el-steps :active="1">
      <el-step title="步骤 1" icon="el-icon-edit"></el-step>
      <el-step title="步骤 2" icon="el-icon-upload"></el-step>
      <el-step title="步骤 3" icon="el-icon-picture"></el-step>
    </el-steps>
  </div>
</template>

2.7. 在components下创建VerticalSteps.vue

<template>
  <div>
    <h1>竖式步骤条</h1>
    <h4>只需要在el-steps元素中设置direction属性为vertical即可。</h4>
    <div style="height: 300px;">
      <el-steps direction="vertical" :active="1">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
      </el-steps>
    </div>
  </div>
</template>

2.8. 在components下创建SimpleSteps.vue

<template>
  <div>
    <h1>简洁风格的步骤条</h1>
    <h4>设置simple可应用简洁风格, 该条件下align-center / description / direction / space都将失效。</h4>
    <el-steps :active="1" simple>
      <el-step title="步骤 1" icon="el-icon-edit"></el-step>
      <el-step title="步骤 2" icon="el-icon-upload"></el-step>
      <el-step title="步骤 3" icon="el-icon-picture"></el-step>
    </el-steps>

    <el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
      <el-step title="步骤 1" ></el-step>
      <el-step title="步骤 2" ></el-step>
      <el-step title="步骤 3" ></el-step>
    </el-steps>
  </div>
</template>

2.9. 运行项目, 访问http://localhost:8080/#/Steps

2.10. 运行项目, 访问http://localhost:8080/#/TitleSteps

2.11. 运行项目, 访问http://localhost:8080/#/DescriptionSteps 

2.12. 运行项目, 访问http://localhost:8080/#/IconSteps 

2.13. 运行项目, 访问http://localhost:8080/#/VerticalSteps 

 

2.14. 运行项目, 访问http://localhost:8080/#/SimpleSteps