Steps步骤条在Vue中的应用

1、Steps步骤条的作用

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

space: 每个 step 的间距，不填写将自适应间距。支持百分比;

direction: 显示方向；

active：设置当前激活步骤；

finish-status：设置结束步骤的状态；

simple：是否应用简洁风格；
3、Steps步骤条应用实例
3.1、html文件
<div style="width: 40%; text-align: center; display: block">
      <el-steps :active="active" finish-status="success" simple>
        <el-step title="用户验证"></el-step>
        <el-step title="重置密码"></el-step>
        <el-step title="修改成功"></el-step>
      </el-steps>
      <div v-if="active === 0" align="center">
        <p>检查用户账号</p>
      </div>
      <div v-if="active === 1" align="center">
        <p>设置账号密码</p>
      </div>
      <div v-if="active === 2" align="center">
        <p>密码设置成功</p>
      </div>
      <el-button style="margin-top: 12px" @click="next">下一步</el-button>
    </div>
3.2、javascript文件
export default {
  data () {
    return {
      active: 0,
    }
  },
  methods: {
    next () {
      if (this.active++ > 2) {
        this.active = 0
      }
    }
  }
}