1、需求背景
自定义的搜索栏,点击红框以外的元素或区域时,关闭红框,类似弹窗的遮罩,点击遮罩就关闭弹窗。
2、实现代码
2.1 创建clickOutside.js
文件
新建一个文件夹directive(专门放置一些指令文件),再创建一个文件夹click,把clickOutside.js
文件放在click文件夹下面
/**
* v-clickOutside 点击元素外触发事件
*/export default {// 初始化指令bind(el, binding, vnode) {function clickHandler(e) {// 这里判断点击的元素是否是本身,是本身,则返回if (el.contains(e.target)) {return false;}// 判断指令中是否绑定了函数if (binding.expression) {// 如果绑定了函数 则调用那个函数,此处binding.value就是resetActiveRow方法binding.value(e);}}// 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听el.__vueClickOutside__ = clickHandler;document.addEventListener('click', clickHandler);},update() {},unbind(el, binding) {// 解除事件监听document.removeEventListener('click', el.__vueClickOutside__);delete el.__vueClickOutside__;}
};
2.2 注册clickOutside.js
这个指令文件
在文件夹directive下,创建index.js文件,代码内容如下
import clickOutside from './click/clickOutside'const install = function(Vue) {Vue.directive('clickOutside', clickOutside)
}
export default install
2.3 在main.js文件中,引入指令
import directive from './directive' // directive
Vue.use(directive)
3、在vue页面文件中使用
<div v-click-outside="test">测试</div>
methods: {test() {// 在这里处理点击自身元素外的区域,需要进行什么逻辑操作,如隐藏自身元素等}
}