Vue 自定義點擊指定div外觸發指令:v-clickOutside

directive.js

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__;
  },
});

main.js

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

頁面

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