element-ui中使用el-step步骤条实现忘记密码功能

效果图

步骤条的使用比较简单,下面这是element官网的用法,我直接用代码展示如下:

html:

<template>
  <div class="page-container">
    <div>
      <div class="title-img-wr">
        <img src="../../assets/images/login/title.png" alt="">
      </div>
      <div class="forgot-password">
        <button type="text" v-show="active>='1'" class="return-page-wr" @click="$router.go(-1)"> <i class="el-icon-arrow-left"></i> 上一步 </button>
        <button type="text" v-show="active=='0'" class="return-page-wr" @click="$router.push({path:'/login'})"> <i class="el-icon-arrow-left"></i> 返回 </button>
        <div class="content">
          <el-steps :active="active" finish-status="success">
            <el-step title="账号验证"></el-step>
            <el-step title="重置密码"></el-step>
            <el-step title="完成设置"></el-step>
          </el-steps>
          <div v-if="active=='0'">
            <el-form ref="verificationForm" :model="verificationForm"  :rules="verificationFormRules" class="demo-ruleForm" @submit.native.prevent>
              <el-form-item prop="account" label="用户名">
                <el-input v-model="verificationForm.account" type="text" placeholder="用户名">
                </el-input>
              </el-form-item>
              <el-form-item prop="secQueId"  label="选择密保问题">
                <el-select v-model="verificationForm.secQueId