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

最新推荐文章于 2025-04-22 16:52:54 发布

原创最新推荐文章于 2025-04-22 16:52:54 发布

· 439 阅读

3 ·

版权

文章标签：

#前端 #面试 #学习

程序员专栏收录该内容

103 篇文章

订阅专栏

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

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

 <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


### 最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/54a6b04f29167333b139d2753f60db9f.png)