用element-plus开发的时候,项目种使用了很多按钮组件,发现点击之后按钮无法自动失焦,单个按钮处理任务太过庞大,采用自定义指令可以解决这个问题。
在src目录下创建directive文件夹,在此文件夹下创建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)
}
})
}
}
在main.js文件种引入
import btn from './directive/btn'
app.use(btn)
使用按钮时<el-button v-btn></button>
采用 v-btn
的指令就可以使按钮点击后自动失焦了。