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

超、凢脫俗 2022-11-16 13:38 479阅读 0赞

## 多个按钮切换时（页面切换） ##

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

**定义状态**

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

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

[20210407111344174.png_pic_center]: /images/20221022/98d4199e70804cafa04b63179391811c.png