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

简介: 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;
}

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

相关文章
|
15天前
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
本篇将带你实现一个带有闪烁动画的按钮交互效果。通过动态改变按钮颜色,用户可以在视觉上感受到按钮的闪烁效果,提升界面互动体验。
78 19
|
2月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
63 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
3月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
3月前
|
JavaScript
Vue实现按钮级别权限
文章介绍了在Vue中实现按钮级别权限的两种方法:使用自定义Vue指令和使用v-if指令配合自定义方法。
38 4
Vue实现按钮级别权限
|
4月前
|
JavaScript
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
283 49
|
2月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
194 0
|
4月前
|
JavaScript
Vue3按钮(Button)
这是一个高度可定制的按钮组件,支持多种属性设置,包括按钮类型、形状、图标、尺寸、背景透明度、波纹颜色、跳转地址、打开方式、禁用状态、加载状态及指示符样式等。预览图展示了不同配置下的按钮样式变化。组件通过Vue实现,并提供了丰富的自定义选项以适应各种场景需求。
217 1
Vue3按钮(Button)
|
3月前
|
前端开发 图形学 开发者
【独家揭秘】那些让你的游戏瞬间鲜活起来的Unity UI动画技巧:从零开始打造动态按钮,提升玩家交互体验的绝招大公开!
【9月更文挑战第1天】在游戏开发领域,Unity 是最受欢迎的游戏引擎之一,其强大的跨平台发布能力和丰富的功能集让开发者能够迅速打造出高质量的游戏。优秀的 UI 设计对于游戏至关重要,尤其是在手游市场,出色的 UI 能给玩家留下深刻的第一印象。Unity 的 UGUI 系统提供了一整套解决方案,包括 Canvas、Image 和 Button 等组件,支持添加各种动画效果。
188 3
|
4月前
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
|
4月前
|
前端开发 开发者 开发框架
JSF与Bootstrap,打造梦幻响应式网页!让你的应用跨设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,响应式设计至关重要,以确保不同设备上的良好用户体验。本文探讨了JSF(JavaServer Faces)与Bootstrap框架的结合使用,展示了如何构建响应式网页。JSF是一个基于Java的Web应用框架,提供丰富的UI组件和表单处理功能;而Bootstrap则是一个基于HTML、CSS和JavaScript的前端框架,专注于实现响应式设计。通过结合两者的优势,开发者能够更便捷地创建自适应布局,提升Web应用体验。然而,这种组合也有其局限性,如JSF组件库较小和较高的学习成本等,因此在选择开发框架时需综合考虑具体需求和应用场景。
57 0

热门文章

最新文章