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

初次接触前端,初次使用vue,初次使用elementui,难免遇到坑。
使用el-button的时候,发现点击按钮后,按钮颜色仍然保持鼠标悬浮上去时候的效果,并没有恢复到正常状态
在这里插入图片描述

原因

el-button 的鼠标经过样式以及点击/获取焦点样式其实都是用css完成的。点击按钮后按钮会获得焦点CSS :focus 选择器触发;
也就是说获得焦点才会导致 el-button 高亮;
在这里插入图片描述

解决方案

你可能会想去掉 :focus这个选择器;或者覆盖
我告诉你!不可能!
我尝试层叠掉那个样式但是color和boder-color貌似给不了none只能用新的样式重叠
在这里插入图片描述

1.直接使用CSS 不使用他的样式(推荐)

直接找到 el-button 给它一个类名 然后直接给它写样式
如下就是鼠标经过变色:

<template>
        <el-button class="view" type="primary" icon="el-icon-view" circle size="mini" />
</template>
<style scoped>
  .view:hover {
    background-color: #3f9eff;
    color: #fff;
    border-color: #3f9eff;
  }
  .view {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
  }
</style>

2.利用强制失去聚焦解决

使用element-ui的样式利用强制失去聚焦解决
因为el-buttion 本身就是因为点击后聚焦才导致按钮一直高亮,那么我们就让他点击后强制失去焦点!

<template>
        <el-button class="view" type="primary" icon="el-icon-view" circle size="mini" />
</template>
<script>
	fn(evt) {
      console.log(evt)
      let target = evt.target
      if (target.nodeName === 'I') {
        target = evt.target.parentNode
      }
      target.blur()
    },
</script>
  • 11
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值