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

Question

element-ui按钮点击后不失焦

Answer 1

这个问题在使用 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 点击后鼠标移出按钮没有失焦的问题。你可以根据自己的需求选择合适的方法来实现。

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

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

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

---

EDIT

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

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

Answer 4

在Element UI中，按钮（<el-button>）在点击后通常不会“失焦”，因为它本身并不是一个可聚焦的元素（如输入框或链接）。按钮在点击后通常只是触发一个事件（如点击事件），然后页面可能会根据这个事件进行导航、数据提交或其他操作，但按钮本身并不会失去焦点，因为它在DOM中并不是一个可聚焦的元素。

然而，如果你是在讨论一个类似按钮的元素（如一个可聚焦的按钮组件或自定义元素），并且希望它在点击后保持某种“激活”状态或样式（类似于不“失焦”的视觉效果），那么这通常不是由Element UI按钮直接控制的，而是需要通过额外的逻辑来实现。

以下是一些可能的解决方案：

1. 使用CSS类: 当按钮被点击时，可以通过JavaScript动态地添加一个CSS类来改变其样式，使其看起来像是保持激活状态。

   document.querySelector('.your-button').addEventListener('click', function() {
     this.classList.add('active');
     // 可以在需要时移除这个类
     // this.classList.remove('active');
   });

.your-button.active {
  /* 激活状态的样式 */
  background-color: #409EFF; /* 举例，Element UI蓝色主题 */
  color: white;
}

2. 利用Element UI的loading状态: 如果你的目的是防止用户在按钮操作未完成前重复点击，Element UI的按钮组件提供了loading属性，可以在点击时显示加载状态。

   <el-button :loading="isLoading" @click="handleClick">点击我</el-button>

data() {
  return {
    isLoading: false,
  };
},
methods: {
  handleClick() {
    this.isLoading = true;
    // 模拟异步操作
    setTimeout(() => {
      this.isLoading = false;
    }, 2000);
  },
}

3. 自定义组件: 如果以上方法都不满足你的需求，你可以考虑创建一个自定义组件，通过Vue的ref属性或其他方式控制其样式或行为。

总之，Element UI的<el-button>组件本身在点击后不会有“失焦”的概念，因为它不是一个可聚焦的元素。如果你的场景有特殊需求，可能需要通过额外的逻辑或样式来实现期望的效果。