element-ui el-button 点击后 鼠标移出按钮没有失焦？

Question

element-ui按钮点击后不失焦

Answer 1

为什么要失焦？你又没有点击其他元素，或者通过业务代码修改你的焦点。

换个比较容易理解的：如果你点击的是一个input元素，那么点击之后为啥要把input失焦？

---

EDIT

如果你想要在鼠标移出按钮之后，让按钮失去焦点。那么你需要额外的添加对应的业务逻辑：
比如说：

<el-button type="primary" @mouseleave.native="e => e.target.blur()">主要按钮</el-button>

Answer 2

透明的按钮不自动失焦的效果会更加明显。可以自定义一个强制按钮失焦的事件，在@click绑定事件中执行。

 <el-button
     type="danger"
     size="small"
     icon="el-icon-delete"
     @click="addHandler($event)"
>批量删除</el-button>

addHandler(event) {
  this.cancelButtonFocusStatus(event);
}

cancelButtonFocusStatus(evt) {
    //点击空白处,target为button;点击字体处,target为span;点击图标处,target为i。后两者本身没有blur,需要判断取父节点button
    let target = evt.target;
    if (target.nodeName == "SPAN" || target.nodeName == "I") {
        target = target.parentNode;
    }
    target.blur();
}

Answer 3

这个问题在使用 Element-UI 的 el-button 时比较常见。点击按钮后，按钮会保持焦点状态，即使鼠标移出按钮，按钮的样式也不会恢复到原来的状态。这是因为按钮在点击后会触发 :focus 选择器。
解决这个问题有几种方法：
1.使用 CSS 覆盖默认样式： 你可以在全局样式中覆盖 el-button 的 :focus 样式，使其与按钮的默认样式一致。这样，当按钮失去焦点时，样式会恢复到原来的状态。
CSS
.el-button:focus {

color: var(--el-button-text-color);
background-color: var(--el-button-bg-color);
border-color: var(--el-button-border-color);

}

2. 在点击事件中手动移除焦点： 你可以在按钮的点击事件中手动调用 blur() 方法来移除焦点。
   <template>
   <el-button @click="handleClick">按钮</el-button>
   </template>

<script>
export default {
methods: {

handleClick(event) {
  event.target.blur();
}

}
}
</script>

3. 使用 :not() 选择器： 你可以使用 :not() 选择器来区分 :focus 和 :hover 的样式，使它们在不同情况下有不同的效果。
   CSS
   .el-button:focus:not(.el-button:hover) {
   color: var(--el-button-text-color);
   background-color: var(--el-button-bg-color);
   border-color: var(--el-button-border-color);
   }

这些方法都可以有效解决 el-button 点击后鼠标移出按钮没有失焦的问题。你可以根据自己的需求选择合适的方法来实现。