element

5.5 KiB

Raw Blame History

基础步骤条

Steps 组件需要设置active属性，接受一个Number，表明步骤的 index，从 0 开始。

需要定宽的步骤条时，设置space属性即可，它接受Boolean，单位为px，如果不设置，则为自适应。

设置finish-status属性可以改变已经完成的步骤的状态，而process-status可以改变当前步骤的状态，Steps组件提供了5种状态：wait，process，finish，error，success。

下两例分别展示了定宽的步骤条和自适应的步骤条：

<el-button @click.native="next">下一步

<el-steps :space="100" :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 @click.native="next">下一步</el-button>

<script>
  export default {
    data() {
      return {
        active: 0
      };
    },

    methods: {
      next() {
        if (this.active++ > 2) this.active = 0;
      }
    }
  }
</script>

<el-steps :active="1" process-status="error">
  <el-step title="步骤 1"></el-step>
  <el-step title="步骤 2"></el-step>
  <el-step title="步骤 3"></el-step>
</el-steps>

状态与描述

Steps 组件中，我们可以给el-step元素设置title属性来定义每一个步骤的标题（或状态）。使用title具名分发，可以用slot的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。

<el-steps :space="100" :active="1" finish-status="success">
  <el-step title="已完成"></el-step>
  <el-step title="进行中"></el-step>
  <el-step title="步骤 3"></el-step>
</el-steps>

除了title外，还可以用description属性来补充说明，下面是一个使用了description的例子：

<el-steps :space="200" :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>

带图标的步骤条

除了title和description，还可以通过icon属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过 slot name 来使用自定义的图标。

<el-steps :space="100" :active="1">
  <el-step title="步骤 1" icon="edit"></el-step>
  <el-step title="步骤 2" icon="upload"></el-step>
  <el-step title="步骤 3" icon="picture"></el-step>
</el-steps>

竖式步骤条

默认情况下，步骤条为横向显示，如果需要竖向显示的步骤条，只需要在el-steps元素中设置direction属性为vertical即可。

<el-steps :space="100" direction="vertical" :active="1">
  <el-step title="步骤 1"></el-step>
  <el-step title="步骤 2"></el-step>
  <el-step title="步骤 3"></el-step>
</el-steps>

API

Steps Attributes

参数	说明	类型	可选值	默认值
space	每个 step 的间距，不填写将自适应间距	Number
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'

Step Attributes

参数	说明	类型	可选值
title	标题	string
description	描述性文字	string
icon	图标	Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入	string

Step Slot

name	说明
icon	图标
title	标题
description	描述性文字

5.5 KiB Raw Blame History Unescape Escape