elementUI Steps 步骤条样式以及方法使用

最新推荐文章于 2024-06-19 15:11:38 发布

渔老师

最新推荐文章于 2024-06-19 15:11:38 发布

阅读量4.7k

点赞数 1

分类专栏：前端文章标签： elementui vue.js

本文链接：https://blog.csdn.net/weixin_36723038/article/details/128811805

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

修改步骤条颜色

原本步骤条：
在这里插入图片描述
期望修改：

实现：（主要是css修改）

div class="theSteps">
            <el-steps :active="active" finish-status="success" >
              <el-step title="步骤 1" description=""></el-step>
              <el-step title="步骤 2"></el-step>
              <el-step title="步骤 3"></el-step>
            </el-steps>
  </div>

// 步骤条
.theSteps{
  /* 进行中状态：圈线 */
  .el-step__head.is-process {
    color: #0076F6;
    border-color: #0076F6;
  }
  /* 进行中状态：圈内 */
  .el-step__head.is-process > .el-step__icon {
    background: #0076F6;
    color: #fff;
  }
/* 进行中状态：title（文字） */

  .el-step__title.is-process {
    color: #0076F6;
    font-size: 14px;
  }
  /* 完成状态：圈线 */
  .el-step__head.is-success {
    color: #0076F6;
    border-color: #0076F6;
  }
  /* 完成状态：圈内 */
  .el-step__head.is-success > .el-step__icon {
    background: #ECF5FF;
    color: #0076F6;
  }
  /* 完成状态：title（文字） */
  .el-step__title.is-success {
    color: #0076F6;
    font-size: 14px;
  }
}

点击上一步，下一步

在这里插入图片描述
实现：

<div class="demo-drawer__footer footerLeftButton">
              <el-button size="small" @click="prev" v-if="prevShow">上一步</el-button>
              <el-button size="small" @click="next" v-if="nextShow">下一步</el-button>
</div>

1.下一步

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

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

2.上一步

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

    methods: {
      next() {
	        if (this.active-- < 2) {
	        this.active = 0
	      } 
      }
    }
  }

官网地址：https://element.eleme.cn/#/zh-CN/component/steps