完美解决element-ui-plus按钮点击后不会自动失去焦点_vue 按钮点击后焦点没有移除

最近新项目采用了Vue3+element-ui-plus，发现按钮点击后，都不会失去焦点，看着很不舒服，结合网上的解决方法，自己优化了下，采用指令方式，感觉很方便：

1 建立btn指令

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 App from './App.vue'
import btn from '@/directives/btn'
 
app.use(btn)

3 在按钮中使用指令

<el-button class="search" type="primary" v-btn @click="searchAllHandler">
    全部
</el-button>

然后就搞定了，是不是很方便~