Element UI按钮点击后残留:focus样式，是bug还是正常现象？

Element UI 按钮点击后残留 :focus 样式，通常不是 bug，而是浏览器的默认行为。当用户点击按钮时，按钮会获得焦点（focus），并且浏览器会应用 :focus 样式来指示当前焦点元素。这是为了辅助键盘导航和可访问性。

原因分析

1. 浏览器默认行为：大多数浏览器在用户点击按钮后，会保持按钮的焦点状态，直到用户点击其他地方或按下 Tab 键切换到其他元素。
2. 可访问性：保持焦点状态有助于键盘用户和屏幕阅读器用户识别当前焦点元素，提升用户体验。

解决方案

如果你不希望按钮在点击后保持 :focus 样式，可以通过以下几种方式解决：

1. 使用 blur() 方法

在按钮的点击事件处理函数中，手动调用 blur() 方法来移除焦点。

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

methods: {
  handleClick(event) {
    // 处理点击逻辑
    event.target.blur(); // 移除焦点
  }
}

2. 使用 CSS 移除焦点样式

你可以通过 CSS 来移除或覆盖 :focus 样式。

.el-button:focus {
  outline: none; /* 移除默认的焦点轮廓 */
  box-shadow: none; /* 移除阴影效果 */
}

3. 使用 tabindex 属性

如果你不希望按钮在点击后获得焦点，可以将 tabindex 设置为 -1，这样按钮将不会在点击后获得焦点。

<el-button tabindex="-1">点击我</el-button>

总结

Element UI 按钮点击后残留 :focus 样式是浏览器的正常行为，旨在提升可访问性。如果你不希望按钮保持焦点样式，可以通过 JavaScript 或 CSS 来移除或覆盖这些样式。