时间戳

首页 > 解决方案 > Vue 两次使用相同的指令

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')">

我有问题，因为我不能在一个组件上使用相同的指令。Vue返回我错误：

vNode.context[binding.expression] is not a function

我找到了这个查询，但答案对我没有帮助。例如，当添加console.log到指令并单击第一个img指令时，将执行两次。

我如何检测（在指令中）img被点击的？

标签： javascriptvue.jsdirective

解决方案

您传递给自定义指令的值将在呈现模板时立即进行评估。这与v-onVue 模板编译器的特殊行为不同，后者会自动将其包装在一个函数中。

我在这个答案中更详细地解释了这一点。

我不知道这是否会完全解决您的问题，但至少您需要执行以下操作：

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

推荐阅读