Vue自定義指令——點擊div區域之外觸發（v-click-outside）

js文件

import Vue from 'vue'
//自定義指令-點擊div區域之外觸發

// 提交驗證
Vue.directive('clickOutside', {
    // 初始化指令
    bind(el, binding) {
        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) {
        // 解除事件監聽
        document.removeEventListener('click', el.__vueClickOutside__);
        delete el.__vueClickOutside__;
    },
});

main.js

//自定義指令引入
import './directive/directive'

頁面

 <div  v-click-outside="outsideClick">

頁面來源：https://blog.csdn.net/weixin_43837268/article/details/88722598