vue2中使用elementui中el-button点击后不失去焦点按钮不变色的问题

最新推荐文章于 2024-06-24 14:37:18 发布

Liuyuejie123456

最新推荐文章于 2024-06-24 14:37:18 发布

阅读量519

点赞数 3

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/Liuyuejie123456/article/details/136967434

版权

element-ui中的button组件，在点击后有一个选中样式，当失去焦点时，这个样式会取消，但是并没有提供一个属性来控制这个样式的出现与消失，需要点击其他地方让按钮失去焦点才能消失。

解决思路：点击后让按钮立即失去焦点

1.给按钮绑定一个ref。

2.点击时让按钮失去焦点

注意使用$el来获取原生节点

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Liuyuejie123456

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

记录:el-button不失焦问题、proxyTable前端跨域、使用“ == ”遇到的坑

weixin_45144296的博客

11-08

331

（一）element button按钮不失焦问题问题：点击后按钮不失去焦点解决方法：点击button的时候，如果点击到文字（即span）上，这个时候evt.target是span标签，这个时候是没法直接触发其父节点button的blur方法的，也就没法强制button失去焦点。所以需要判断点击的是span还是button //处理el-button点击后不失去焦点 clickHandler(evt) { let target = evt.target; if(ta

Elementui 的按钮el-button点击切换class

u011200562的博客

04-08

6225

完整代码 <template> <div class="type-check"> <el-button :type="0==display?'success':'default'" size="mini" @click="displayCheck(0)">表格 </el-button> <el-button :ty...

1 条评论您还未登录，请先登录后发表或查看评论

elementui中el-button点击后不失去焦点(按钮颜色不变)的解决方案

最新发布

前端打工人的博客

06-24

932

的默认策略鼠标按下后处于 focus 状态，也就是看上去没有恢复成原来的颜色（此时是focus样式被激活）。修改这个问题非常简单，不过不应该破坏w3标准的默认策略，因为网页访问者有正常人、残障人、机器人等，可能会破坏其他使用者的操作。第一种方法：可以通过css解决，这样可能会引起一些效果失效，点击之后，再次点击hover效果没有了，link等类型的按钮这样设置无效，不建议修改。经过一番搜索发现问题所在，鼠标点击之后处于focus状态，所以看上去没有恢复成原来的颜色（此时是focus样式被激活）

解决el-button的点击后不自动失去焦点的问题

qq_43595591的博客

05-13

558

【代码】解决el-button的点击后不自动失去焦点的问题。

解决 Element-ui 按钮点击放开后不会自动失焦仍是悬停样式

Score666的博客

01-04

544

稍微优化了一下，不然警告看着难受。

关于ElementUI按钮组件el-button点击后不自动失焦问题

随笔

09-02

6116

<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的vue版404 500 403 页面

06-06

在本文中，我们将深入探讨如何使用ElementUI的`el-button`组件来构建Vue.js应用程序中的错误页面，包括404、500和403状态码对应的自定义页面。ElementUI是一个流行的前端UI库，它提供了丰富的组件，用于快速构建美观...

在element-ui的el-tree组件中用render函数生成el-button的实例代码

01-19

本文主要介绍怎么在el-tree组件中通过render函数来生成el-button。这是element-ui中el-tree树：这是需要实现的效果： tree.vue文件中，具体实现的代码如下： <el-tree :data=treeData :props=...

vue 二次封装elementUI el-button

Supporint的博客

01-13

2146

二次封装element-ui 二次封装el-button vue

Vue使用ElementUI的el-dropdown点击事件问题

qq_41383941的博客

04-06

1万+

Vue使用ElementUI的el-dropdown点击事件问题el-dropdown介绍问题重述问题解决后续 el-dropdown介绍 el-dropdown是ElementUI提供的响应式的实现下拉菜单的功能组件。详细用法可见官方说明文档：https://element.eleme.cn/#/zh-CN/component/dropdown 问题重述我在实现下拉菜单的时候，在el-dropdown-item添加点击事件发现定义的事件无法被正常触发。下面是我的代码： <el-dropdown&

elementui按钮点击后无法自动失焦问题处理

qq_44278386的博客

11-03

550

用element-plus开发的时候，项目种使用了很多按钮组件，发现点击之后按钮无法自动失焦，单个按钮处理任务太过庞大，采用自定义指令可以解决这个问题。的指令就可以使按钮点击后自动失焦了。在main.js文件种引入。

el-button 设置了按钮的颜色，点击按钮不让其变色，依旧保持设置的颜色

szzlh123456789的博客

01-18

983

【代码】el-button 设置了按钮的颜色，点击按钮不让其变色，依旧保持设置的颜色。

element-plus-button 按钮点击之后颜色不还原的问题

naozheyun2998的博客

03-21

1171

element button 按钮

elementui中el-button点击后不失去焦点(按钮颜色不变)的解决

寬真

03-07

4984

因为是前端新手，对很多东西不熟悉，所以就一脸懵逼的去百度，大多数说的都是类似“Element UI点击按钮后不失焦，强制失焦”即可，查看相应的css代码，基本确认就是由于点击后按钮不失去焦点导致的。只能说天下文章一大抄啊！因为如果点击按钮的空白处，点击完毕后，的确可以恢复到点击前的状态的，但是如果点击“退出”两个字，在点击完成后，按钮状态还是没有恢复到点击之前的样子。使用el-button的时候，发现点击按钮后，按钮颜色仍然保持鼠标悬浮上去时候的效果，并没有恢复到正常状态。图2-鼠标悬浮或点击后的按钮。

Element UI点击按钮后不失焦...强制给它失焦

sophie2805的专栏

12-18

7168

使用element ui库，发现button点下去之后会一直保持被点击的状态直到鼠标在别的地方点一下才恢复。也就是说button被点击之后一直没有失焦，直到点击别的地方，将焦点切换走。虽说不影响功能，但是用起来有点别扭。然后就想办法手动失焦： document.getElementById("xxButton").blur(); 给button加一个唯一ID，然后@click回调函数里，加上上...

要实现element-plus的el-button按钮点击后背景颜色不变

m0_64506822的博客

07-15

1211

el-button好像自带类名“el-button”

el-button点击按钮只后失去焦点

09-02

你可以使用 `@blur` 事件来在按钮点击后手动移除焦点。在点击事件处理函数中，你可以使用 `this.$refs.buttonName.blur()` 方法来移除按钮的焦点。示例代码如下： ```vue <template> <div> <el-button ref="buttonName" @click="handleClick">Click me</el-button> </div> </template> <script> export default { methods: { handleClick() { // 处理点击事件 // ... // 移除按钮焦点 this.$refs.buttonName.blur(); } } } </script> ``` 这样，在按钮被点击后，它将失去焦点。请注意，`buttonName` 是指定给按钮的 `ref` 属性值，你可以根据需要进行修改。