最近新項(xiàng)目采用了Vue3+element-ui-plus，發(fā)現(xiàn)按鈕點(diǎn)擊后，都不會失去焦點(diǎn)，看著很不舒服，結(jié)合網(wǎng)上的解決方法，自己優(yōu)化了下，采用指令方式，感覺很方便：
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 在按鈕中使用指令文章來源：http://www.zghlxwxcb.cn/news/detail-508248.html
<el-button class="search" type="primary" v-btn @click="searchAllHandler">
全部
</el-button>然后就搞定了，是不是很方便~文章來源地址http://www.zghlxwxcb.cn/news/detail-508248.html
到了這里，關(guān)于完美解決element-ui-plus按鈕點(diǎn)擊后不會自動失去焦點(diǎn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
