前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >element-ui的步骤条组件 el-steps

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

作者头像
用户4344670
发布2019-08-28 11:05:30
6.1K0
发布2019-08-28 11:05:30
举报
文章被收录于专栏:vue的实战vue的实战
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%;
  }

  • 主要是控制步骤条的样式
  • 实现步骤进度的保存(步骤数存放在本地),刷新之后任然为当前步骤。
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.04.30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • el-steps组件的引入
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档