Javascript 如何在vuejs中正确处理元素外部的单击？

是否有适当的解决方案来处理元素外部的单击

有一些通用的解决方案，如：

但问题是几乎所有的项目在不同的组件中都有多个不同的弹出窗口，我应该处理它们的外部点击

---

如何在不使用全局窗口的情况下处理click outisde。on？（我认为不可能将所有组件都放在window.on中的case handler之外）

在努力解决此问题并对此进行搜索后，我发现如何使用vuejs指令解决此问题而不流血：

使用库：

v-click-out

是个不错的选择

没有图书馆：

//main.js
import '@/directives';
......

// directives.js
import Vue from "vue";
Vue.directive('click-outside', {
  bind: function (element, binding, vnode) {
    element.clickOutsideEvent = function (event) {  //  check that click was outside the el and his children
      if (!(element === event.target || element.contains(event.target))) { // and if it did, call method provided in attribute value
        vnode.context[binding.expression](event);
        // binding.value(); run the arg
      }
    };
    document.body.addEventListener('click', element.clickOutsideEvent)
  },
  unbind: function (element) {
    document.body.removeEventListener('click', element.clickOutsideEvent)
  }
});

使用v-click-outside指令，在任何需要的地方使用它，如下所示：

//header.vue
 <div class="profileQuickAction col-lg-4 col-md-12" v-click-outside="hidePopUps">
...
</>

//header.vue
...

您可以在

上进行检查。享受吧！

//header.vue
 <div class="profileQuickAction col-lg-4 col-md-12" v-click-outside="hidePopUps">
...
</>