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

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