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

修改步骤条颜色

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

实现:(主要是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

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值