草庐IT

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

唧唧林 2023-05-11 原文

问题:element-ui 的按钮 点击鼠标左键并放开 后,不会自动失焦,仍是和 鼠标放上面但是不按同一个样式,还要点一下其他空白地方才能变得正常,和我平时看见的不太一样,十分不喜欢。

 

十分不喜欢第4状态样式,4居然和第2状态样式一样,我想让第4状态和第1状态样式一样!

 ​​​​​

        从网上借鉴过很多方法,但是都没有效果,今天我自己找方法!

想看直接看解决方案,可以拉到第三部分,不过建议全文看完,反正也不是很长。


原因:CSS样式中,按钮可以分为4种状态(其实还有别的,主要针对这个问题)

为了方便理解,我们可以使用浏览器的开发者工具(F12)查看这个按钮的styles

1.默认状态:鼠标没在上面,并且没点过(对应问题部分的1状态)

 2.hover状态:鼠标悬停和划过时(对应问题部分的2状态)

 

 3.active状态:鼠标左键按住按钮,但是没有放开(对应问题部分的3状态)

其实按住的时候,hover状态也还在,所以是两个状态共存

 

4.focus状态:获得聚焦时,其实也就是按了左键放开之后,主要用于文本框输入文字时(所以也就不难理解,为什么focus状态存在于按钮上并且没设置好其style 的时候会这么不顺眼了)。

洞察问题:在以上的styles中,我们不难发现el-button:focus和el-button:hover的style代码一样的,所以也就不难明白为什么,状态4(focus)的样式和状态2(hover)是一样的。


解决方案:知道了问题是“el-button:focus和el-button:hover的style代码是一样的”之后,那我们把el-button:focus的代码改成和默认状态(状态1)一样的style不就好了吗。这样的话,状态1和状态4就是同一个style了。

那我们很直接的可以想到,直接把el-button:focus的样式改成和默认状态一样的样式,然后写在App.vue的style中让其覆盖原先默认的样式,这样不就好了吗?

但是有两个小问题:(一定要注意!!!)

1.这里button默认状态样式很长,但是我们只需要改颜色,所以我们只需要拿它的 background-color,border-color和color 这三个属性就行了

2.我们不能在App.vue中只覆写el-button:focus,因为focus、hover、active这三个样式的编写是有顺序要求的,focus然后hover然后active。如果只覆写el-button:focus,会打乱原先本来正常的顺序,然后导致出问题。所以,我们要覆写el-button:focus、el-button:hover、el-button:active三个。

开搞!!!        先解决默认类型button,再解决其他类型的!

1. 在浏览器中使用开发者工具(F12)找到有问题的button的样式代码

el-button:hover、el-button:active:只需要从开发者工具里面复制粘贴到App.vue中的<style>中就行,

el-button:focus:要从开发者工具里的el-button里面找出 background-color、border-color、color 三个属性,再把其赋给el-button:focus

这里要注意顺序一定要是focus然后hover然后active!

//App.vue中

<style>
.el-button:focus {
  background-color: #FFF;
  border-color: #DCDFE6;
  color: #606266;
}

.el-button:hover {
  color: #409EFF;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.el-button:active {
  color: #3a8ee6;
  border-color: #3a8ee6;
  outline: 0;
}
</style>

2.然后再跑一次,发现问题解决了

3.但是千万别着急,这只是对默认类型的按钮有用,text类型、primary类型等其他类型的el-button也必须要单独搞,才能解决(因为他们使用的不是同一套样式)。做法和上面是一样的。

再次强调顺序:focus然后hover然后active!

text类型button的代码如下:

<style>
.el-button--text:focus {
  background-color: initial;
  border-color: transparent;
  color: #409EFF;
}

.el-button--text:hover {
  color: #66b1ff;
  border-color: transparent;
  background-color: transparent;
}

.el-button--text:active {
  color: #3a8ee6;
  border-color: transparent;
  background-color: transparent;
}
</style>

primary类型button的代码如下:

<style>
.el-button--primary:focus {
  background-color: #409EFF;
  border-color: #409EFF;
  color: #FFF;
}

.el-button--primary:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #FFF;
}

.el-button--primary.is-active, .el-button--primary:active {
  background: #3a8ee6;
  border-color: #3a8ee6;
  color: #FFF;
}
</style>

最后,全部都没问题了

总结:不管是哪种类型的按钮,只要自己在App.vue的style中覆写原来的按钮处于focus、hover、active状态的样式就可以了,而且也只是去覆写它原来的老三样background-color、border-color、color就可以了。

说明:本人主要学习后端,前端的内容只是照猫画虎、三脚猫功夫,内容可能有错误,这个解决方法可能并不是最高效的方法,但是也算是一个可以解决问题的方法,希望对大家有用。

有关解决 Element-ui 按钮点击放开后 不会自动失焦 仍是悬停样式的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序,虽然我自己可以处理一大堆yml文件,但我说的语言(非常)有限,最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器,其中一些翻译器不愿意或无法处理存储库中的100多个文件,处理语言数据。谢谢&问候,安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题,我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby - Highline 询问方法不会使用同一行 - 2

    设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline,但已经有几个月没有使用它了。现在,在Ruby1.9.2上全新安装时,它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗? 最佳答案

  3. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0,我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时,我通过运行railss并访问localhost:3000确保该应用程序正常运行以前,我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后,由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0,此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  4. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf),开发人员无需担心javascript或jquery的东西。据我所知,JSF是一个规范,基于规范的各种可用实现,prim

  5. 屏幕录制为什么没声音?检查这2项,轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题,比如录制的视频没有声音。屏幕录制为什么没声音?今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音,你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音,屏幕录制为什么没声音?如果当时没有打开音频录制,则录制好的视频是没有声音的。因此,建议在录制前进行检查。屏幕上没有声音,很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音,即可录制音频和图画同步视频。操作方法:步骤1:点击电脑屏幕右下侧的“小喇叭”图案,在上方的选项中,选择“声音”。 步骤2:在“声

  6. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容:函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数,那么至少存在一个,使得:通过这个表达式我们可以知道,f(x)是函数的主体,a和b可以看作是主体函数f(x)中所取的两个值。那么可以有,  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法: 外层函数f(x)是一致的,并且h(x)和g(x)是等价无穷小。此时,利用拉格朗日定理,将原式替换为 ,再进行求解,往往会省去复合函数求极限的很多麻烦。使用要注意:1.要先找到主体函数f(x),即外层函数必须相同。2.f(x)找到后,复合部分是等价无穷小。3.要满足作差的形式。如果是加

  7. 深度学习部署:Windows安装pycocotools报错解决方法 - 2

    深度学习部署:Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯:公主号AiCharm本系列是作者在跑一些深度学习实例时,遇到的各种各样的问题及解决办法,希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

  8. ruby-on-rails - Rails 单选按钮 - 模型中多列的一种选择 - 2

    我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频,可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗?为此,表单应该是什么样的?目前我有类似的东西但显然它允许多项选择,而我试图将它限制为只有一个..怎么办? 最佳答案 如果要使用字符串列,让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模

  9. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  10. ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2

    我有可变数量的表格和可变数量的行,我想让它们一个接一个地显示,但如果表格不适合当前页面,请将其放在下一页,然后继续。我已将表格放入事务中,以便我可以回滚然后打印它(如果高度适合当前页面),但我如何获得表格高度?我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.

随机推荐