今天面试有遇到面试官问的一个问题,就是在vue中自定义一个指令,指令在为元素添加上之后,点击元素之外的区域,可以将元素隐藏起来。当时没有回答出来,回来后仔细一看,发现其实还是挺简单的,现在我就将整个教程分享给大家。
1.在main.js定义一个全局的自定义指令
原理:
1.在指令中,给整个document文档设置一个点击事件,然后就使用到事件对象。这里告诉大家一个只是点,就是event.target是触发当前时间的源头,event.current是当前正在执行事件的元素。
2.这里实现逻辑就非常的简单,只要判断当前触发事件的源头是否是使用标签的元素就好了,只要不是,就给元素设置隐藏。
Vue.directive("leavehide", {
bind(el, bindings, vnode) {
document.onclick = function (event) {
if (el !== event.target) {//判断当前触发事件的源头,是否是当前指令所在的元素
el.style.display = "none"//只要是就给它设置display:none让它隐藏
}
}
}
})
2.使用
由于它是全局自定义的指令,所以,可以在组件中任意使用。
实现效果:
在是给元素使用上这个自定义指令之后,只要点击元素的外部,就可以实现对元素的隐藏。