ElementUI Button 颜色无法恢复？巧用 Vue 解决

2024-05-14 17:26:39

使用 ElementUI 开发的时候，Button 组件点击后，按钮颜色无法恢复到原状态。这通常会等到用户再次点击其他地方，按钮的颜色才会恢复。那么，问题的原因是什么呢？又应该如何解决这个问题呢？

问题产生的原因

产生这个问题的原因在于浏览器默认行为。当我们点击一个 button（按钮类型的元素）后，浏览器会自动将这个元素获取焦点（设为 :focus 状态），这种行为可增加操作的可访问性，尤其对于键盘操作用户来说尤其方便。

然而，元素被设为 :focus 状态后，CSS 样式可能会发生变化。在某些情况下，如 ElementUI 的 Button 组件，按钮在 :focus 状态时的颜色与点击时的颜色是一样的。因此，按钮点击后，颜色会一直保持，直到用户点击其他地方使按钮失去焦点。

解决办法 - Vue全局事件监听

对于 Vue.js，因为动态生成 DOM，传统的 JS 方式监听事件可能无法满足需求。为了解决这个问题，我们可以使用 Vue 提供的生命周期钩子函数 mounted()，在其中为 document 对象添加全局的点击事件监听器。采用这个方法，可以确保无论什么时候、什么地方添加的 .meta-button 类的元素都会被监听到。以下是具体的代码实现：

// 在 App.vue 或其他的全局组件中
export default {
  mounted() {
    document.addEventListener('click', (event) => {
      let hasMetaButton = false;
      for (let el of event.composedPath()) {
        if (el.classList && el.classList.contains('meta-button')) {
          hasMetaButton = true;

          // 移除焦点
          el.blur();
          break;
        }
      }
    });
  }
}