element-ui el-button点击后不失焦

最新推荐文章于 2024-03-23 14:53:52 发布
最新推荐文章于 2024-03-23 14:53:52 发布
阅读量2w 收藏 1
点赞数 2
分类专栏： web 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45266125/article/details/107018669
版权

博客地址：http://www.globm.top/blog/1/detail/14
使用element ui库，发现button点下去之后会一直保持被点击的状态直到鼠标在别的地方点一下才恢复。也就是说button被点击之后一直没有失焦，直到点击别的地方，将焦点切换走

如果按钮有按键监听行为，那么当按钮在聚焦状态下也会触发，比如点击button打开模态窗时调用了一个方法openDialog,如果按钮未失去焦点，那么通过按键可能会再次触发该方法，所以需要手动移除聚焦效果

openDialog(ev) {
 ev.target.blur()
},
萝卜砸大坑
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
10-17
主要介绍了element-ui 的el-button组件中添加自定义颜色和图标的实现方法，目前的解决方案是：添加一个自定义全局指令，同时在element-ui源码中，加入对应的组件。需要的朋友跟随小编一起看看吧
elementui中el-button点击后不失去焦点(按钮颜色不变)的解决
寬真
03-07 4723
因为是前端新手，对很多东西不熟悉，所以就一脸懵逼的去百度，大多数说的都是类似“Element UI点击按钮后不失焦，强制失焦”即可，查看相应的css代码，基本确认就是由于点击后按钮不失去焦点导致的。只能说天下文章一大抄啊！因为如果点击按钮的空白处，点击完毕后，的确可以恢复到点击前的状态的，但是如果点击“退出”两个字，在点击完成后，按钮状态还是没有恢复到点击之前的样子。使用el-button的时候，发现点击按钮后，按钮颜色仍然保持鼠标悬浮上去时候的效果，并没有恢复到正常状态。图2-鼠标悬浮或点击后的按钮。
解决使用 element-ui 的 table 组件时，表格里面有按钮聚焦问题
web00_11的博客
01-07 739
在按钮点击事件里面添加如下代码即可 let r= this.tableData.findIndex((item) => item.index === row.index) document.querySelector(`tbody tr:nth-child(${r+1}) .el-table_1_column_4 .el-button`).blur()
vue2中使用elementui中el-button点击后不失去焦点按钮不变色的问题
最新发布
Liuyuejie123456的博客
03-23 173
element-ui中的button组件，在点击后有一个选中样式，当失去焦点时，这个样式会取消，但是并没有提供一个属性来控制这个样式的出现与消失，需要点击其他地方让按钮失去焦点才能消失。解决思路：点击后让按钮立即失去焦点。注意使用$el来获取原生节点。1.给按钮绑定一个ref。2.点击时让按钮失去焦点。
Element-UI中，按钮点击后移开鼠标颜色仍然聚焦的解决方法（纯css整体解决）
BlackJunffg的博客
05-20 3320
文章原创作者：27号白开水 链接：https://blog.csdn.net/kangrushuai/article/details/114686368 在使用element-ui的过程中，发现按钮点击后存在聚焦问题，即点击后移开鼠标，按钮颜色不变回原来的样式，而是会加上一个:foc
Element UI点击按钮后不失焦...强制给它失焦
sophie2805的专栏
12-18 7080
使用element ui库，发现button点下去之后会一直保持被点击的状态直到鼠标在别的地方点一下才恢复。也就是说button被点击之后一直没有失焦，直到点击别的地方，将焦点切换走。 虽说不影响功能，但是用起来有点别扭。然后就想办法手动失焦： document.getElementById("xxButton").blur(); 给button加一个唯一ID，然后@click回调函数里，加上上...
elementui中el-button点击后强制失去焦点（this.$confirm取消后按钮聚焦问题）
weixin_57246557的博客
08-20 5096
初次接触前端，初次使用vue，初次使用elementui，难免遇到坑。 使用el-button的时候，发现点击按钮后，按钮颜色仍然保持鼠标悬浮上去时候的效果，并没有恢复到正常状态。如图示： 图1-正常状态下的按钮 图2-鼠标悬浮或点击后的按钮 我们所期望的是，在按钮点击后，恢复到正常状态（即图1）。 因为是前端新手，对很多东西不熟悉，所以就一脸懵逼的去百度，大多数说的都是类似“Element UI点击按钮后不失焦，强制失焦”即可，查看相应的css代码，基本确认就是由于点击后按钮不失去焦点导致的。搜索到的
解决elementui中button按钮组件在点击其他区域时 失去焦点问题！
weixin_44797881的博客
09-26 640
通过操作dom节点来解决elementui中button按钮组件在点击其他区域失去焦点的问题
解决elementuiplus的button组件点击之后仍然是hover的问题以及修改主题颜色之后button的颜色问题
qq_57952018的博客
12-06 1378
最近遇到了elementui的button组件的问题，到目前位置官网也是这样的。自己摸索着修复这个问题。
elementui中el-button点击后不失去焦点(按钮颜色不变)的解决方案
热门推荐
留着鼻涕敲代码
10-31 1万+
初次接触前端，初次使用vue，初次使用elementui，难免遇到坑。 使用el-button的时候，发现点击按钮后，按钮颜色仍然保持鼠标悬浮上去时候的效果，并没有恢复到正常状态 原因 el-button 的鼠标经过样式以及点击/获取焦点样式其实都是用css完成的。点击按钮后按钮会获得焦点CSS :focus 选择器触发； 也就是说获得焦点才会导致 el-button 高亮； 解决方案 你可能会想去掉 :focus这个选择器；或者覆盖 我告诉你！不可能！ 我尝试层叠掉那个样式但是color和boder
关于ElementUI按钮组件el-button点击后不自动失焦问题
随笔
09-02 6028
<el-button icon="el-icon-edit" @click="handleClick">click</el-button> ... handleClick (e) { let target = e.target; // 根据button组件内容 里面包括一个span标签，如果设置icon，则还包括一个i标签，其他情况请自行观察。 // 所以，在我们点击到button组件上的文字也就是span标签上时，直接执行e.target.blur()不会生
elementUI el-button 点击后样式自动恢复的方法 （纯css已解决）
Khun_HWJ的博客
03-06 4595
elementUI el-button 点击后样式自动恢复的方法 （纯css已解决）
element-ui 的el-button组件中添加自定义颜色和图标的实现方法.docx
01-13
element-ui 的el-button组件中添加自定义颜色和图标的实现方法.docx
在element-ui的el-tree组件中用render函数生成el-button的实例代码
10-17
主要介绍了在element-ui的el-tree组件中用render函数生成el-button 的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Element-ui css非网络引用，
07-26
Element-ui css非网络引用 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css1"> <link rel="stylesheet" href="/js/vue/index.css"> <el-button @click=...
VUE element-ui 之button按钮之间切换时单个按钮持续聚焦状态实现（点击按钮聚焦，仅当点击其他按钮时，之前的按钮会失焦，当前按钮聚焦）
HanXiaoXi_yeal的博客
04-07 2278
多个按钮切换时（页面切换） 假设不做处理会出现点击按钮时聚焦，离开按钮点击任何地方（鼠标单击）按钮会失焦 我这里要求实现点击按钮聚焦，仅当点击其他按钮时，之前的按钮会失焦，当前按钮聚焦（也就是提醒用户当前处于哪个维度的页面） 这里自己研究的方法，理论上不能算是聚焦失焦（双重判断改变按钮颜色） <div class="changebtn"> <div> <el-button round :class="state1 === false?'color
element-ui使用el-button去掉focus
wx258852的博客
11-30 6476
开发时使用el-button按钮点击之后不会恢复到原来的样式，需要出发其他地方的点击事件才会恢复，参考文章elementui中el-button点击后强制失去焦点（this.$confirm取消后按钮聚焦问题）_Kimser-CSDN博客 我的代码： HTML： <el-button type="danger" style="margin-bottom:10px" @click="deleteRowAll($event)" ...
Element UI 按钮点击后不失焦，按钮颜色改变问题
qq_44839030的博客
09-20 4698
Element UI 按钮点击后不失焦，按钮颜色改变问题
Vue中使用element-ui的el-dialog对话框
05-30
要在Vue中使用element-ui的el-dialog对话框，你需要先安装element-ui，可以使用npm或者yarn进行安装。 1. 通过npm安装 ``` npm install element-ui --save ``` 2. 通过yarn安装 ``` yarn add element-ui ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萝卜砸大坑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值