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

Dadada胖子关注IP属地: 山东

0.252020.08.17 22:15:44字数 434阅读 13,205

初次接触前端，初次使用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。