首先新建一个directives.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 |
export const clickOutSide = { // 初始化指令 bind(el, binding, vnode) { function documentHandler(e) { // 这里判断点击的元素是否是本身，是本身，则返回 if (el.contains(e.target)) { return false; } // 判断指令中是否绑定了函数 if (binding.expression) { // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法 binding.value(e); } } // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听 el.__vueClickOutside__ = documentHandler; document.addEventListener('click', documentHandler); }, update() {}, unbind(el, binding) { // 解除事件监听 document.removeEventListener('click', el.__vueClickOutside__); delete el.__vueClickOutside__; }, }; |
然后在组件内：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> <div class="" v-if="closeFlag" v-clickOutSide="handlerClick"> 确认过眼神，不是我的八哥 </div> </template> <script> import {clickOutSide} from './directives' export default { data() { return { closeFlag: true } }, directives: { clickOutSide } </script> |
