Vue自定义指令实现点击Dom外元素触发事件

1.创建directive.js文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

import Vue from "vue";   // 提交验证   Vue.directive("clickOutside", {   // 初始化指令     bind(el, binding, vnode) {     function clickHandler(e) {       // 这里判断点击的元素是否是本身，是本身，则返回         if (el.contains(e.target)) {         return false;       }         // 判断指令中是否绑定了函数         if (binding.expression) {         // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法           binding.value(e);       }     }       // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听       el.__vueClickOutside__ = clickHandler;       document.addEventListener("click", clickHandler);   },     update() {},     unbind(el, binding) {     // 解除事件监听       document.removeEventListener("click", el.__vueClickOutside__);       delete el.__vueClickOutside__;   }, });

　　2.在main.js中引入自定义指令

?

1	import './directive/directive'

　　3.在dom中使用

?

1	<div v-click-outside="isShowAgree"></div>

　　这是全局的写法，使用起来十分简单，如果是另外的元素点击出现的相关div,使用@click.stop就可以解决了