Steps 步骤条

Steps 步骤条

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

基础用法

简单的步骤条。

下一步

设置active属性，接受一个Number，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置space属性即可，它接受Boolean，单位为px，如果不设置，则为自适应。设置finish-status属性可以改变已经完成的步骤的状态。

<aui-step :active="active" finish-status="success">
  <aui-step-item title="步骤 1"></aui-step-item>
  <aui-step-item title="步骤 2"></aui-step-item>
  <aui-step-item title="步骤 3"></aui-step-item>
</aui-step>

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

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

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

显示代码 复制代码 复制代码

含状态步骤条

每一步骤显示出该步骤的状态。

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

显示代码 复制代码 复制代码

有描述的步骤条

每个步骤有其对应的步骤状态描述。

<aui-step :active="1">
  <aui-step-item title="步骤 1" description="这是一段很长很长很长的描述性文字"></aui-step-item>
  <aui-step-item title="步骤 2" description="这是一段很长很长很长的描述性文字"></aui-step-item>
  <aui-step-item title="步骤 3" description="这段就没那么长了"></aui-step-item>
</aui-step>

显示代码 复制代码 复制代码

竖式步骤条

竖直方向的步骤条。

只需要在aui-step元素中设置direction属性为vertical即可。

<div style="height: 300px;">
  <aui-step direction="vertical" :active="1">
    <aui-step-item title="步骤 1"></aui-step-item>
    <aui-step-item title="步骤 2"></aui-step-item>
    <aui-step-item title="步骤 3" description="这是一段很长很长很长的描述性文字"></aui-step-item>
  </aui-step>
</div>

显示代码 复制代码 复制代码

S曲线的步骤条

步骤数量过多时，可以让步骤条转弯。

下一步

只需要在aui-step元素中设置mode属性为curveLine，默认从第6步之后转弯。如果要自定义每行的步骤数量，设置并在aui-step中绑定stepNum属性即可。

<aui-step :active="active1" finish-status="success" mode="curveLine">
  <aui-step-item v-for="index in 15" :key="index" :title="`步骤${index+1}`"></aui-step-item>
</aui-step>

<aui-button style="margin-top: 12px;" @click="next1">下一步</aui-button>

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

    methods: {
      next1() {
        if (this.active1++ > 15) this.active1 = 0;
      }
    }
  }
</script>

显示代码 复制代码 复制代码

Step Attributes

参数	说明	类型	可选值	默认值
direction	显示方向	string	vertical/horizontal	horizontal
active	设置当前激活步骤	number	—	0
current-status	设置当前步骤的状态	string	wait / process / finish / error / success	process
finish-status	设置结束步骤的状态	string	wait / process / finish / error / success	finish
mode	设置步骤的是否可曲线展示	string	straightLine / curveLine	straightLine
stepNum	步骤条每几个开始转弯	number	-	6
align-center	设置步骤和标题是否居中	boolean	true/false	—

StepItem Attributes

参数	说明	类型	可选值	默认值
title	标题	string	—	—
description	描述性文字	string	—	—
status	设置当前步骤的状态，不设置则根据 steps 确定状态	wait / process / finish / error / success	—

Step Events

事件名称	说明	回调参数
change	步骤条发生改变时触发	newVal,oldVal(改变后的步骤的索引，改变前的步骤的索引)

StepItem Events

事件名称	说明	回调参数
dblclick	双击步骤时触发	itemData(当前双击的步骤的索引和标题)