在vue中实现一个自定义指令,应用场景: 一个下拉框点击框内每条数据的时候正常走逻辑,点击框外的部分,把下拉框合起
// 和methods,mounted,computed,watch等平级写一个
directives:{
clickoutside
},
// 在script标签里面定义一个全局的常量
const clickoutside = {
bind(el, binding, vnode) {
function documentHandler(e) {
if (el.contains(e.target)) {
return false
}
if (binding.expression) {
binding.value(e)
}
}
el.__vueClickOutside__ = documentHandler
document.addEventListener('click', documentHandler)
},
update() {},
unbind(el, binding) {
// 解除事件监听
document.removeEventListener('click', el.__vueClickOutside__)
delete el.__vueClickOutside__
},
}
// 在dom中应用的时候,直接使用自定义的指令,绑定个函数控制下拉框的关闭
<div v-clickoutside="handleClose"></div>
// handleClose函数
handleClose(){
this.modal = false
}