Question

我正在使用一条指令来检测外部点击元素：

"click-outside": {
  bind(el, binding, vnode) {
    el.clickOutsideEvent = function(e) {
      if (!(el == e.target || el.contains(e.target))) {
        vnode.context[binding.expression](e);
      }
    };
    document.body.addEventListener("click", el.clickOutsideEvent);
  },
  unbind(el) {
    document.body.removeEventListener("click", el.clickOutsideEvent);
  }
}

此伪指令的使用是允许用户通过单击按钮来关闭他们打开的弹出窗口。这是实现：

<div v-click-outside="outside">Dummy</div>

和外部函数反过来只是隐藏div。问题在于，每次加载（安装）弹出窗口时，都会执行外部函数，这将导致弹出窗口立即关闭并且永远不会被看到。试图调试它，我怀疑是这条线：

vnode.context[binding.expression](e);

但是我不明白为什么会导致这种行为有什么主意吗？

组件加载时Vue指令执行功能

0 个答案: