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

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

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

 <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;
}

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


版权声明:本文为HanXiaoXi_yeal原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>