Question

我有一个列表作为组件，它包含像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的更好解决方案。

Answer 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 含义的更多信息

Answer 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();
}

你想检查是否有最近的＆＃34; element ...检查生成的jQuery查找的length。

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

2 个答案: