vue实现自定义指令 点击元素区域外执行事件

效果演示:

需求：出现搜索窗口后，点击搜索窗口外关闭搜索窗口 vueClickOutSize.js:

const 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); }, unbind(el, binding) { // 解除事件监听 document.removeEventListener("click", el.__vueClickOutside__); delete el.__vueClickOutside__; // 删除属性 } }; export default clickOutside

使用：

import clickOutside from "@/directives/vueClickOutSize"; export default { data() { return { flag: false }; }, components: { SmallArticleItem }, directives: { clickOutside }, props: ["placeholder"], methods: { closeSearchBar() { if (this.flag === false) { //可能在第一次点击时也会触发。这里做个判断 this.flag = true; } else { this.$emit("onClose"); } }, }, };

实例见: https://github.com/pppercyWang/twitter-blog-vue