VUE element-ui 之button按钮之间切换时单个按钮持续聚焦状态实现(点击按钮聚焦,仅当点击其他按钮时,之前的按钮会失焦,当前按钮聚焦)

web前端 同时被 3 个专栏收录
47 篇文章 1 订阅
34 篇文章 0 订阅
11 篇文章 0 订阅

多个按钮切换时(页面切换)

假设不做处理会出现点击按钮时聚焦,离开按钮点击任何地方(鼠标单击)按钮会失焦
我这里要求实现点击按钮聚焦,仅当点击其他按钮时,之前的按钮会失焦,当前按钮聚焦(也就是提醒用户当前处于哪个维度的页面)
在这里插入图片描述
这里自己研究的方法,理论上不能算是聚焦失焦(双重判断改变按钮颜色)

 <div class="changebtn">
      <div>
        <el-button round :class="state1 === false?'color2':'color1'" class="different" @click="getData(className.page1.id)">1个月</el-button>
      </div>
      <div>
        <el-button round :class="state2 === false?'color2':'color1'" class="different" @click="getData(className.page2.id)">3个月</el-button>
      </div>
      <div>
        <el-button round :class="state3 === false?'color2':'color1'" class="different" @click="getData(className.page3.id)">6个月</el-button>
      </div>
      <div>
        <el-button round :class="state4 === false?'color2':'color1'" class="different" @click="getData(className.page4.id)">1</el-button>
      </div>
 </div>

定义状态

 data () {
    return {
      state1: true,
      state2: false,
      state3: false,
      state4: false,
    }
  },

获取按钮id,做判断

switch(id){
        case 1 :
        this.state1 = true
        this.state2 = false
        this.state3 = false
        this.state4 = false
        break
        case 2 :
        this.state1 = false
        this.state2 = true
        this.state3 = false
        this.state4 = false
        break
        case 3 :
        this.state1 = false
        this.state2 = false
        this.state3 = true
        this.state4 = false
        break
        case 4 :
        this.state1 = false
        this.state2 = false
        this.state3 = false
        this.state4 = true
        break
      }

style颜色定义

.color1{
  color: #1890ff;
  background: #e8f4ff;
  border: 1px solid #badeff;
}
.color2{
  color: dimgray;
}

属于笨办法,但是亲测有效,完全可以实现,希望可以帮到您,如果您有更好的方法可以交流。

  • 1
    点赞
  • 9
    评论
  • 3
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:技术工厂 设计师:CSDN官方博客 返回首页

打赏作者

赫兹/Herzz

如果我的博文帮助到您请打赏支持

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值