初次接触前端,初次使用vue,初次使用elementui,难免遇到坑。
使用el-button的时候,发现点击按钮后,按钮颜色仍然保持鼠标悬浮上去时候的效果,并没有恢复到正常状态。如图示:
图1-正常状态下的按钮
图2-鼠标悬浮或点击后的按钮
我们所期望的是,在按钮点击后,恢复到正常状态(即图1)。
因为是前端新手,对很多东西不熟悉,所以就一脸懵逼的去百度,大多数说的都是类似“Element UI点击按钮后不失焦,强制失焦”即可,查看相应的css代码,基本确认就是由于点击后按钮不失去焦点导致的。搜索到的解决方案基本如下:evt.target.blur()。只能说天下文章一大抄啊!!!搜到的几篇帖子,都只是使用evt.target.blur()强制失去焦点即可,然而这并没有全面解决问题。 因为如果点击按钮的空白处,点击完毕后,的确可以恢复到点击前的状态的,但是如果点击“退出”两个字,在点击完成后,按钮状态还是没有恢复到点击之前的样子。
解决方法:
clickHandler(evt) {let target = evt.target;if(target.nodeName == "SPAN"){target = evt.target.parentNode;}target.blur();}
上面是解决方法。
原因:
下图为el-button的结构:
el-button结构图
点击button的时候,如果点击到文字(即span)上,这个时候evt.target是span标签,这个时候是没法直接触发其父节点button的blur方法的,也就没法强制button失去焦点。所以需要判断点击的是span还是button。
如果觉得《elementui中el-button点击后强制失去焦点(this.$confirm取消后按钮聚焦问题)》对你有帮助,请点赞、收藏,并留下你的观点哦!