完美解决element-ui-plus按钮点击后不会自动失焦

• 现象：
  点击按钮后，如果不再点击别的地方，按钮不会失焦，一直有颜色~

  
  不失去焦点问题.png

解决：

1、 建立 v-btn

// src/directives/btn.js
export default {
    install: (app) => {
      const fun = function (evt) {
        let target = evt.target
        if (target.nodeName == 'SPAN') {
          target = evt.target.parentNode
        }
        target.blur()
      }
      app.directive('btn', {
        mounted(el) {
          el.addEventListener('focus', fun)
        },
        unmounted(el) {
          el.removeEventListener('focus', fun)
        }
      })
    }
  }

2、main.js中注册 全局使用

import btn from "@/directives/btn";
const app = createApp(App)
app.use(btn)

3、用到的地方添加v-tbn即可。

<el-button
        v-btn
         :class="likeButtonClass"
         @click="likeMessage"
         >{{ $t('mesage.like') }}
</el-button>

参考链接