element-ui的步骤条组件 el-steps

el-steps组件的引入

代码语言：javascript复制

    <div class="box3">
      <el-steps direction="vertical" :active="number">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 3" description="步骤完成"></el-step>
      </el-steps>
    </div>
  <el-button type="success" @click="addStep()">增加步骤</el-button>
  <el-button type="danger" @click="resize()">清除步骤</el-button>

---

步骤条的样式.png

代码语言：javascript复制

///　增加步骤条的步数
     addStep() {
        this.number  ;
        sessionStorage.setItem("key",this.number1);　// 保存到本地
      },
///　清除步数
      resize () {

        this.number = 1;
        sessionStorage.setItem("key",this.number1);
      },
   mounted() {
      var a = parseInt(sessionStorage.getItem("key")); // 页面刷新的时候this.number 从本地取
      this.number = a;
    }

代码语言：javascript复制

  /*步骤条的高度*/
  .box3 >>> .el-step.is-vertical {
    height: 50%;
  }

---

• 主要是控制步骤条的样式
• 实现步骤进度的保存（步骤数存放在本地），刷新之后任然为当前步骤。

el png

0 人点赞