Element UI按钮点击后焦点样式残留：是Bug还是预期行为？

在Element UI中，按钮点击后焦点样式残留的现象通常是由于浏览器的默认行为导致的，而不是Element UI的Bug。当用户点击按钮时，浏览器会自动为该按钮添加焦点样式（通常是蓝色的边框或外框），以表示该按钮当前处于焦点状态。这种样式在用户点击其他元素或按下Tab键切换焦点之前会一直保留。

原因分析

1. 浏览器默认行为：大多数浏览器在用户点击按钮后会为其添加焦点样式，以便用户知道当前焦点在哪个元素上。
2. CSS样式问题：如果你在项目中自定义了按钮的样式，可能会影响到焦点的显示效果，导致焦点样式看起来像是“残留”。
3. JavaScript事件处理：在某些情况下，如果按钮的点击事件处理不当（例如没有正确移除焦点），可能会导致焦点样式看起来像是“残留”。

解决方案

1. 移除焦点样式： 如果你不希望按钮在点击后保留焦点样式，可以通过CSS来移除焦点样式。例如：

   .el-button:focus {
      outline: none;
   }
   

   这样，按钮在获得焦点时将不会显示默认的焦点样式。

2. 手动移除焦点： 在按钮的点击事件处理函数中，手动移除焦点。例如：

   <el-button @click="handleClick">点击我</el-button>
   
   methods: {
      handleClick(event) {
          // 处理点击事件
          event.target.blur(); // 移除焦点
      }
   }
   

   这样，按钮在点击后会自动失去焦点，焦点样式也会随之消失。

3. 使用tabindex属性： 如果你希望按钮在点击后不获取焦点，可以设置tabindex="-1"，这样按钮将不会参与键盘导航，也不会在点击后获取焦点。

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

总结

按钮点击后焦点样式残留通常是浏览器的默认行为，而不是Element UI的Bug。你可以通过CSS或JavaScript来移除焦点样式，或者通过设置tabindex属性来避免按钮获取焦点。根据你的具体需求选择合适的解决方案。