Javascript Vue使用同一指令两次

我有全局指令在用户单击“退出”时隐藏模式：

Vue.directive('click-outside', {
  bind(el, binding, vNode) {
    el.clickOutside = event => {      
      if (!(el == event.target || el.contains(event.target))) {
            vNode.context[binding.expression](event);
            event.stopPropagation();
        }
    }
    document.body.addEventListener('click', el.clickOutside)
  },
  unbind(el) {
    document.removeEventListener('click', el.clickOutside)
    el.clickOutside = null
  }
});

接下来，我将使用此指令：

<img src="noti.png" id="1" v-click-outside="onClickOutside('notification')">

<img src="dots.png" id="2" v-click-outside="onClickOutside('profile')">

我发现了这个，但答案对我没有帮助。 将

console.log

添加到指令并单击第一个

img上的示例时，指令将执行两次

如何检测（在指令中）单击了哪个
img
？
在呈现模板时，将立即计算传递给自定义指令的值。这与Vue模板编译器具有特殊行为的
v-on
不同，Vue模板编译器会自动将其包装到函数中

我将在中更详细地解释这一点

我不知道这是否能完全解决您的问题，但至少您需要这样做：

onClickOutside（'notification'）”>
在呈现模板时，将直接计算传递给自定义指令的值。这与Vue模板编译器具有特殊行为的
v-on
不同，Vue模板编译器会自动将其包装到函数中

我将在中更详细地解释这一点

我不知道这是否能完全解决您的问题，但至少您需要这样做：

onClickOutside（'notification'）”>
您正在检查相反的操作-未单击哪个img。要捕获img点击事件，只需使用v-on：点击仅供参考，您不需要执行`el==event.target`和
el.contains（event.target）
，您只需使用
contains（）
就可以为给定节点的子代（包括其自身）返回
true
。您正在检查相反的操作-哪个img未被点击。要捕获img click事件，只需使用v-on:click仅供参考，您不需要执行`el==event.target`和
el.contains（event.target）
，您只需使用
contains（）
，就可以为给定节点（包括其自身）的后代返回
true
。
vNode.context[binding.expression] is not a function