如何检查用户的点击以切换弹出窗口？ [VueJS]答案

【问题标题】：How to check clicks of the user in order to toggle popup? [VueJS]如何检查用户的点击以切换弹出窗口？ [VueJS]
【发布时间】：2017-08-21 04:47:58
【问题描述】：

我有一个列表作为组件，它包含像 facebook 这样的隐藏弹出窗口。例如，您单击列表中的任何项目，它会显示有关该项目的弹出窗口 here is my interface that I mentioned

这是模板

<template id="adboard-group-sidebar-member-template">
<li class="card-item" data-member-id="{{ member.id }}" @click="toggleMemberCard">
item content
</li>
</template>

这里是 vuejs

toggleMemberCard(event) {
        this.popupDisplayed = !this.popupDisplayed;
    },

使用 v-if / v-show 属性可以正常运行。但仅适用于项目列表。如果用户想点击界面上的任何位置。我正在检查以下几行：

popupListener(event) {
        let element = $(event.target),
            allCard = $(document).find('.popup'),
            pointer_popup = element[0].closest('.popup'),
            pointer_card = element[0].closest('.card-item');

        if ((!pointer_popup && !pointer_card) || (pointer_popup && pointer_card)) {
            allCard.hide();
        }
    }

这也在 VueJS 的 ready 方法中监听。这不是一个好的解决方案。我想知道并寻找 VueJS 更好的解决方案。

【问题讨论】：

popuplistener 是做什么的？比如您希望用户在哪里点击打开弹出窗口？
删除element[0].closest 中的[0]。 .closest() 是一个 jQuery 方法。它必须用于 jQuery 元素。使用 [0] 获取 DOM 元素....所以该方法不起作用。
这段代码工作正常，但我不想尽可能多地使用 jquery @LouysPatriceBessette
我想在用户单击弹出窗口和列表中的任意位置时关闭弹出窗口。 @kevlai22
«我不想尽可能多地使用 jquery» -- element 上面两行定义为 jQuery 元素。

标签： javascript jquery vue.js popup listener

【解决方案1】：

我认为您需要做的就是添加一个自定义指令来处理该元素（即弹出窗口）之外的点击。

Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    el.event = function (event) {
      // here I check that click was outside the el and his childrens
      if (!(el == event.target || el.contains(event.target))) {
        // and if it did, call method provided in attribute value
        vnode.context[binding.expression](event);
      }
    };
    document.body.addEventListener('click', el.event)
  },
  unbind: function (el) {
    document.body.removeEventListener('click', el.event)
  },
});

这是一个有效的demo

您可以在https://vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments

中找到有关自定义指令以及 el, binding, vnode 含义的更多信息

【讨论】：

【解决方案2】：

试试这个...遗憾的是，它使用了强大的 jQuery 库。

let element = $(event.target),
allCard = $(document).find('.popup'),
pointer_popup = element.closest('.popup').length,
pointer_card = element.closest('.card-item').length;

if (pointer_popup == 0 && pointer_card == 0) {
  allCard.hide();
}

您想检查是否存在“最近”元素...检查生成的 jQuery 查找的 length。

【讨论】：