Comment vérifier les clics de l'utilisateur afin de faire basculer la popup? [VueJS]

Question

J'ai une liste en tant que composant et il contient une fenêtre cachée comme facebook. Par exemple, vous cliquez sur un élément de la liste, et il montre pop-up sur l'élément here is my interface that I mentioned

ici est modèle

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

ici est vuejs

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

Il fonctionne correctement avec v-if/v-show attributs. Mais ne fonctionne que sur la liste des articles. Si l'utilisateur veut cliquer sur n'importe quel emplacement sur l'interface. Je vérifie comme les lignes suivantes:

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

Également ceci écoute dans la méthode prête de VueJS. Ce n'est pas une bonne solution. Je me demande et cherche une meilleure solution avec VueJS.

Answer 1

Je pense que tout ce que vous devez faire est d'ajouter une directive personnalisée pour gérer les clics en dehors de cet élément (c'est-à-dire le popup).

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) 
    }, 
}); 

est ici un travail demo

Vous pouvez trouver plus d'informations sur les directives personnalisées et ce el, la reliure, vnode signifie dans https://vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments

Answer 2

Try this ... Malheureusement, il utilise le powerfull Bibliothèque 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(); 
} 

Vous voulez vérifier s'il y a un élément « le plus proche » ... Vérifiez la length de la recherche jQuery résultant.