elementui中el-button点击后不失去焦点(按钮颜色不变)的解决方案

初次接触前端，初次使用vue，初次使用elementui，难免遇到坑。
使用el-button的时候，发现点击按钮后，按钮颜色仍然保持鼠标悬浮上去时候的效果，并没有恢复到正常状态

原因

el-button 的鼠标经过样式以及点击/获取焦点样式其实都是用css完成的。点击按钮后按钮会获得焦点CSS :focus 选择器触发；
也就是说获得焦点才会导致 el-button 高亮；

解决方案

你可能会想去掉 :focus这个选择器；或者覆盖
我告诉你！不可能！
我尝试层叠掉那个样式但是color和boder-color貌似给不了none只能用新的样式重叠

1.直接使用CSS 不使用他的样式(推荐)

直接找到 el-button 给它一个类名 然后直接给它写样式
如下就是鼠标经过变色：

<template>
        <el-button class="view" type="primary" icon="el-icon-view" circle size="mini" />
</template>
<style scoped>
  .view:hover {
    background-color: #3f9eff;
    color: #fff;
    border-color: #3f9eff;
  }
  .view {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
  }
</style>

2.利用强制失去聚焦解决

使用element-ui的样式利用强制失去聚焦解决
因为el-buttion 本身就是因为点击后聚焦才导致按钮一直高亮，那么我们就让他点击后强制失去焦点！

<template>
        <el-button class="view" type="primary" icon="el-icon-view" circle size="mini" />
</template>
<script>
	fn(evt) {
      console.log(evt)
      let target = evt.target
      if (target.nodeName === 'I') {
        target = evt.target.parentNode
      }
      target.blur()
    },
</script>