element 按钮button 失焦问题补全

已于 2024-05-23 18:06:43 修改
阅读量206 收藏
点赞数 3
文章标签： vue.js elementui scss less 前端
于 2024-05-23 18:05:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sonnyface/article/details/139154303
版权

问题点： element的 button按钮在和弹窗组件关联使用的时候，关闭弹窗，button按钮的hover状态不会恢复过来。
解决方案： 如下代码，引入到main.js中。

使用版本： "element-plus": "^2.3.12"

// 按钮样式点击重置
.el-button.el-button--primary:not(.is-disabled):focus {
  color: var(--el-color-white) !important;
  background-color: var(--el-color-primary);
  border-color: var(--el-color-primary);
}
.el-button.el-button--primary:not(.is-disabled):hover {
  color: var(--el-color-white) !important;
  background-color: var(--el-color-primary-light-3);
  border-color: var(--el-color-primary-light-3);
}

.el-button.el-button--success:not(.is-disabled):focus {
  color: var(--el-color-white) !important;
  background-color: var(--el-color-success);
  border-color: var(--el-color-success);
}
.el-button.el-button--success:not(.is-disabled):hover {
  color: var(--el-color-white) !important;
  background-color: var(--el-color-success-light-3);
  border-color: var(--el-color-success-light-3);
}

.el-button.el-button--info:not(.is-disabled):focus {
  color: var(--el-color-white) !important;
  background-color: var(--el-color-info);
  border-color: var(--el-color-info);
}
.el-button.el-button--info:not(.is-disabled):hover {
  color: var(--el-color-white) !important;
  background-color: var(--el-color-info-light-3);
  border-color: var(--el-color-info-light-3);
}

.el-button.el-button--warning:not(.is-disabled):focus {
  color: var(--el-color-white) !important;
  background-color: var(--el-color-warning);
  border-color: var(--el-color-warning);
}
.el-button.el-button--warning:not(.is-disabled):hover {
  color: var(--el-color-white) !important;
  background-color: var(--el-color-warning-light-3);
  border-color: var(--el-color-warning-light-3);
}

.el-button.el-button--danger:not(.is-disabled):focus {
  color: var(--el-color-white) !important;
  background-color: var(--el-color-danger);
  border-color: var(--el-color-danger);
}
.el-button.el-button--danger:not(.is-disabled):hover {
  color: var(--el-color-white) !important;
  background-color: var(--el-color-danger-light-3);
  border-color: var(--el-color-danger-light-3);
}

// 朴素按钮失焦
.el-button.el-button--primary.is-plain:not(.is-disabled):focus {
  color: var(--el-color-primary) !important;
  background-color: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary-light-5);
}
.el-button.el-button--primary.is-plain:not(.is-disabled):hover {
  color: var(--el-color-white) !important;
  background-color: var(--el-color-primary);
  border-color: var(--el-color-primary);
}

.el-button.el-button--success.is-plain:not(.is-disabled):focus {
  color: var(--el-color-success) !important;
  background-color: var(--el-color-success-light-9);
  border-color: var(--el-color-success-light-5);
}
.el-button.el-button--success.is-plain:not(.is-disabled):hover {
  color: var(--el-color-white) !important;
  background-color: var(--el-color-success);
  border-color: var(--el-color-success);
}

.el-button.el-button--info.is-plain:not(.is-disabled):focus {
  color: var(--el-color-info) !important;
  background-color: var(--el-color-info-light-9);
  border-color: var(--el-color-info-light-5);
}
.el-button.el-button--info.is-plain:not(.is-disabled):hover {
  color: var(--el-color-white) !important;
  background-color: var(--el-color-info);
  border-color: var(--el-color-info);
}

.el-button.el-button--warning.is-plain:not(.is-disabled):focus {
  color: var(--el-color-warning) !important;
  background-color: var(--el-color-warning-light-9);
  border-color: var(--el-color-warning-light-5);
}
.el-button.el-button--warning.is-plain:not(.is-disabled):hover {
  color: var(--el-color-white) !important;
  background-color: var(--el-color-warning);
  border-color: var(--el-color-warning);
}

.el-button.el-button--danger.is-plain:not(.is-disabled):focus {
  color: var(--el-color-danger) !important;
  background-color: var(--el-color-danger-light-9);
  border-color: var(--el-color-danger-light-5);
}
.el-button.el-button--danger.is-plain:not(.is-disabled):hover {
  color: var(--el-color-white) !important;
  background-color: var(--el-color-danger);
  border-color: var(--el-color-danger);
}

// 文字按钮失焦
.el-button.el-button--primary.is-text:not(.is-disabled):focus {
  color: var(--el-color-primary) !important;
  background-color: var(--el-color-white);
}
.el-button.el-button--primary.is-text:not(.is-disabled):hover {
  color: var(--el-color-primary) !important;
  background-color: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary-light-5);
}

.el-button.el-button--success.is-text:not(.is-disabled):focus {
  color: var(--el-color-success) !important;
  background-color: var(--el-color-white);
}
.el-button.el-button--success.is-text:not(.is-disabled):hover {
  color: var(--el-color-success) !important;
  background-color: var(--el-color-success-light-9);
  border-color: var(--el-color-success-light-5);
}

.el-button.el-button--info.is-text:not(.is-disabled):focus {
  color: var(--el-color-info) !important;
  background-color: var(--el-color-white);
}
.el-button.el-button--info.is-text:not(.is-disabled):hover {
  color: var(--el-color-info) !important;
  background-color: var(--el-color-info-light-9);
  border-color: var(--el-color-info-light-5);
}

.el-button.el-button--warning.is-text:not(.is-disabled):focus {
  color: var(--el-color-warning) !important;
  background-color: var(--el-color-white);
}
.el-button.el-button--warning.is-text:not(.is-disabled):hover {
  color: var(--el-color-warning) !important;
  background-color: var(--el-color-warning-light-9);
  border-color: var(--el-color-warning-light-5);
}

.el-button.el-button--danger.is-text:not(.is-disabled):focus {
  color: var(--el-color-danger) !important;
  background-color: var(--el-color-white);
}
.el-button.el-button--danger.is-text:not(.is-disabled):hover {
  color: var(--el-color-danger) !important;
  background-color: var(--el-color-danger-light-9);
  border-color: var(--el-color-danger-light-5);
}

//修复按钮边框闪烁
.el-button.is-link{
    border: none!important
}

// 链接按钮失焦
.el-button.el-button--primary.is-link:not(.is-disabled):focus {
  color: var(--el-color-primary) !important;
  border: none;
  background: none;
}
.el-button.el-button--primary.is-link:not(.is-disabled):hover {
  color: var(--el-color-primary-light-5) !important;
}

.el-button.el-button--success.is-link:not(.is-disabled):focus {
  color: var(--el-color-success) !important;
}
.el-button.el-button--success.is-link:not(.is-disabled):hover {
  color: var(--el-color-success-light-5) !important;
}

.el-button.el-button--info.is-link:not(.is-disabled):focus {
  color: var(--el-color-info) !important;
}
.el-button.el-button--info.is-link:not(.is-disabled):hover {
  color: var(--el-color-info-light-5) !important;
}

.el-button.el-button--warning.is-link:not(.is-disabled):focus {
  color: var(--el-color-warning) !important;
}
.el-button.el-button--warning.is-link:not(.is-disabled):hover {
  color: var(--el-color-warning-light-5) !important;
}

.el-button.el-button--danger.is-link:not(.is-disabled):focus {
  color: var(--el-color-danger) !important;
  background-color: inherit!important;
  border: none!important;
}
.el-button.el-button--danger.is-link:not(.is-disabled):hover {
  color: var(--el-color-danger-light-5) !important;
}
sonnyface
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element Input输入框的使用方法
10-15
<el-button slot="append" icon="el-icon-search"></el-button> ``` ### 带提示的输入框 `<el-autocomplete>` 组件提供了自动补全功能，可以根据用户输入的内容动态提供建议列表。例如： - 基础用法： ```html...
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
12-11
6. **表单组件**：`<el-input>`用于输入文本，`v-model`双向绑定数据，`auto-complete="off"`禁用自动补全。`<el-input-number>`用于输入数字，`v-model`同样双向绑定。`<el-input type="textarea">`用于多行文本...
解决element-plus的按钮为自动失焦问题；解决element-plus的按钮点击态
最新发布
i_am_a_div的博客
05-31 345
解决element-plus的按钮为自动失焦问题；解决element-plus的按钮点击态
解决elementUI或elementPlus的按钮点击后需要失去焦点才能恢复原本样式问题
LLL3189860667的博客
01-12 1224
废话不多说直接上代码，只需要在button中添加如下代码即可。
解决el-button失去焦点
Koreyoshi123654的博客
03-11 1192
解决el-button失去焦点
解决el-button的:focus引起的样式问题
weixin_41770909的博客
08-26 1312
当点击按钮时，按钮处于灰色状态，但是鼠标移出按钮，按钮并没有回复成原本的颜色。
element表格hover取消，不影响自己设置的颜色
TianQiWanLaiQiu的博客
08-12 528
.page /deep/ .el-table__body tr:hover > td { background-color: rgba(0, 0, 0, 0) !important; }
vue中el-input绑定键盘按键(按键修饰符)
11-20
Element-UI中的`el-input`组件是用于创建输入框的自定义组件，它封装了一些内置功能，比如自动补全、清除按钮等。然而，当我们尝试直接通过键盘事件监听器（如`@keyup`）来捕获键盘事件时，可能会遇到问题。 在Vue...
ElementHelper是ElementUI的Atom包
08-12
Element-UI是一款基于Vue.js的开源前端组件库，它提供了丰富的UI组件，如表格、按钮、提示、下拉菜单等，广泛应用于Web应用程序的构建。Element-Helper作为其配套工具，能够帮助开发者更好地管理和利用这些组件。 ...
html+css仿小米商城首页搜索页和商品详情页
12-30
使用CSS选择器（如类选择器`.class`、ID选择器`#id`、标签选择器`element`）来指定元素的样式。同时，使用盒模型（包括内边距、边框和外边距）调整元素尺寸和位置，实现响应式设计，确保页面在不同设备上显示良好。 ...
elementui中el-button点击后不失去焦点(按钮颜色不变)的解决方案
留着鼻涕敲代码
10-31 1万+
初次接触前端，初次使用vue，初次使用elementui，难免遇到坑。 使用el-button的时候，发现点击按钮后，按钮颜色仍然保持鼠标悬浮上去时候的效果，并没有恢复到正常状态 原因 el-button 的鼠标经过样式以及点击/获取焦点样式其实都是用css完成的。点击按钮后按钮会获得焦点CSS :focus 选择器触发； 也就是说获得焦点才会导致 el-button 高亮； 解决方案 你可能会想去掉 :focus这个选择器；或者覆盖 我告诉你！不可能！ 我尝试层叠掉那个样式但是color和boder
ElementPuls校验规则，去掉小星星
cmx5201314的博客
03-03 552
校验去掉小星星
element-ui使用el-button去掉focus
wx258852的博客
11-30 6662
开发时使用el-button按钮点击之后不会恢复到原来的样式，需要出发其他地方的点击事件才会恢复，参考文章elementui中el-button点击后强制失去焦点（this.$confirm取消后按钮聚焦问题）_Kimser-CSDN博客 我的代码： HTML： <el-button type="danger" style="margin-bottom:10px" @click="deleteRowAll($event)" ...
elementUI el-button 点击后样式自动恢复的方法
LeeBingNing的博客
04-16 6749
elementUI el-button 点击后样式自动恢复的方法
更改el-button按钮的悬浮和点击样式
m0_60200582的博客
10-28 1万+
原样式 更改后样式 <el-button class='el-buttons' size="small" plain>朴素按钮</el-button> <style scoped> .el-buttons { background: #22415d; color: #b9c4d3; border: 1px solid #126ca0; opacity: 1 } </style> <st..
解决 Element-ui 按钮点击放开后 不会自动失焦 仍是悬停样式
weixin_51141523的博客
08-21 4968
我使用 element-ui 的按钮 点击鼠标左键放开并移开 后，不会自动失焦，仍是和 鼠标放上面但是不按 是同一个样式，还要点一下其他空白地方才能变得正常，和我平时看见的不太一样，十分不喜欢。 然后上网找了一些解决方法，结果都不是很满意，然后自己弄了很久，终于搞定了。
element-ui el-button点击后不失焦
热门推荐
萝卜砸大坑
06-29 2万+
使用element ui库，发现button点下去之后会一直保持被点击的状态直到鼠标在别的地方点一下才恢复。也就是说button被点击之后一直没有失焦，直到点击别的地方，将焦点切换走 如果按钮有按键监听行为，那么当按钮在聚焦状态下也会触发，比如点击button打开模态窗时调用了一个方法openDialog,如果按钮未失去焦点，那么通过按键可能会再次触发该方法，所以需要手动移除聚焦效果 openDialog(ev) { ev.target.blur() }, ...
Element UI中点击按钮后不失焦？如何强制给它失焦
web00_11的博客
09-05 1573
在使用element-ui 中按钮组件的时候，会发现点击之前和点击之后按钮的颜色不一样，其实是点击时候按钮聚焦，当按空格键时还会触发按钮上绑定的事件，只有点击一下别处才会让按钮失焦 那么该怎么解决这个问题呢？想想既然点击会让按钮聚焦，那么就可以在按钮事件里面加上让按钮失焦的方法即可 document.querySelector('按钮选择器').blur() ...
element ui 表单校验失焦
08-26
element ui 表单校验失焦是指在用户离开表单输入框时，进行校验操作。Element UI是一款基于Vue.js的组件库，提供了丰富的表单校验功能。 要实现失焦校验，我们可以使用Element UI提供的表单校验规则和API。首先，我们需要在表单输入框中定义校验规则，例如： ```html <el-form :model="form" ref="form" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username" @blur="validateField('username')"></el-input> </el-form-item> </el-form> ``` 上述代码中，`@blur`事件绑定了`validateField`方法，该方法会在输入框失去焦点时触发。 然后，在Vue的`methods`中定义`validateField`方法： ```javascript methods: { validateField(field) { this.$refs.form.validateField(field); } } ``` `validateField`方法调用了Element UI提供的`validateField`方法，用于校验指定字段。 最后，在Vue的`data`中定义校验规则： ```javascript data() { return { form: { username: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ] } } } ``` 上述代码中，`rules`定义了`username`字段的校验规则，其中`trigger: 'blur'`表示在失焦时触发校验。 这样，当用户离开用户名输入框时，会触发校验规则，根据规则进行相应的校验提示。 希望对你有帮助！如还有其他问题，请继续提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值