最近新项目采用了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 在按钮中使用指令文章来源：https://www.toymoban.com/news/detail-508248.html
<el-button class="search" type="primary" v-btn @click="searchAllHandler">
全部
</el-button>然后就搞定了，是不是很方便~文章来源地址https://www.toymoban.com/news/detail-508248.html
到了这里，关于完美解决element-ui-plus按钮点击后不会自动失去焦点的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
