Comment puis-je détecter un clic en dehors de mon élément? J'utilise Vue.js donc ça va être en dehors de mon élément templates. Je sais comment le faire dans Vanilla JS, mais je ne suis pas sûr qu'il existe un moyen plus approprié de le faire, lorsque j'utilise Vue.js?
Voici la solution pour Vanilla JS: événement Javascript Detect Click en dehors de div
Je suppose que je peux utiliser un meilleur moyen d'accéder à l'élément?
javascript
vue.js
Communauté
la source
la source
Réponses:
Peut être résolu correctement en configurant une fois une directive personnalisée:
Usage:
Dans le composant:
Démonstration de travail sur JSFiddle avec des informations supplémentaires sur les mises en garde:
https://jsfiddle.net/Linusborg/yzm8t8jq/
la source
Il y a la solution que j'ai utilisée, qui est basée sur la réponse de Linus Borg et fonctionne très bien avec vue.js 2.0.
Vous vous y liez en utilisant
v-click-outside
:Voici une petite démo
Vous pouvez trouver plus d'informations sur les directives personnalisées et ce que signifie el, binding, vnode dans https://vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments
la source
Ajoutez un
tabindex
attribut à votre composant afin qu'il puisse être ciblé et procédez comme suit:la source
outline: none;
le focus pour l'élément.Il existe deux packages disponibles dans la communauté pour cette tâche (les deux sont maintenus):
la source
vue-clickaway
Le paquet a parfaitement résolu mon problème. MerciCela a fonctionné pour moi avec Vue.js 2.5.2:
la source
la source
J'ai combiné toutes les réponses (y compris une ligne de vue-clickaway) et j'ai trouvé cette solution qui fonctionne pour moi:
Utilisation dans le composant:
la source
J'ai mis à jour la réponse de MadisonTrash pour prendre en charge Mobile Safari (qui n'a pas d'
click
événement,touchend
doit être utilisé à la place). Cela comprend également une vérification afin que l'événement ne soit pas déclenché en faisant glisser sur les appareils mobiles.la source
J'utilise ce code:
bouton afficher-masquer
élément afficher-masquer
scénario
Mise à jour: retirer la montre; ajouter l'arrêt de la propagation
la source
Je déteste les fonctions supplémentaires alors ... voici une solution de vue géniale sans méthodes de vue supplémentaires, seulement var
la source
Si vous recherchez spécifiquement un clic en dehors de l'élément mais toujours dans le parent, vous pouvez utiliser
J'utilise ceci pour les modaux.
la source
Vous pouvez enregistrer deux écouteurs d'événements pour un événement de clic comme celui-ci
la source
la source
La réponse courte: cela devrait être fait avec des directives personnalisées .
Il y a beaucoup de bonnes réponses ici qui le disent également, mais la plupart des réponses que j'ai vues se décomposent lorsque vous commencez à utiliser le clic extérieur de manière intensive (en particulier en couches ou avec plusieurs exclusions). J'ai écrit un article sur le médium parlant des nuances des directives douanières et spécifiquement de la mise en œuvre de celle-ci. Il ne couvre peut-être pas tous les cas marginaux, mais il a couvert tout ce que j'ai pensé.
Cela représentera plusieurs liaisons, plusieurs niveaux d'autres exclusions d'éléments et permettra à votre gestionnaire de gérer uniquement la «logique métier».
Voici le code pour au moins la partie définition de celui-ci, consultez l'article pour une explication complète.
la source
Je l'ai fait d'une manière légèrement différente en utilisant une fonction dans created ().
De cette façon, si quelqu'un clique en dehors de l'élément, dans mon cas, la navigation mobile est masquée.
J'espère que cela t'aides!
la source
Il existe déjà de nombreuses réponses à cette question, et la plupart d'entre elles sont basées sur l'idée de directive personnalisée similaire. Le problème avec cette approche est que l'on doit passer une fonction de méthode à la directive, et ne peut pas directement écrire du code comme dans d'autres événements.
J'ai créé un nouveau package
vue-on-clickout
qui est différent. Découvrez-le sur:Il permet d'écrire
v-on:clickout
comme n'importe quel autre événement. Par exemple, vous pouvez écrireet il fonctionne.
Mettre à jour
vue-on-clickout
prend désormais en charge Vue 3!la source
Juste si quelqu'un cherche comment masquer le modal en cliquant en dehors du modal. Comme modal a généralement son wrapper avec la classe de
modal-wrap
ou tout ce que vous avez nommé, vous pouvez mettre@click="closeModal"
le wrapper. En utilisant la gestion des événements indiquée dans la documentation vuejs, vous pouvez vérifier si la cible cliquée est soit sur le wrapper, soit sur le modal.la source
Les solutions @Denis Danilenko fonctionnent pour moi, voici ce que j'ai fait: Au fait, j'utilise VueJS CLI3 et NuxtJS ici et avec Bootstrap4, mais cela fonctionnera également sur VueJS sans NuxtJS:
la source
Vous pouvez émettre un événement javascript natif personnalisé à partir d'une directive. Créez une directive qui distribue un événement à partir du nœud, à l'aide de node.dispatchEvent
Qui peut être utilisé comme ça
la source
Je crée un div à la fin du corps comme ça:
Où .à l'extérieur est:
Et away () est une méthode dans l'instance Vue:
Facile, fonctionne bien.
la source
Si vous avez un composant avec plusieurs éléments à l'intérieur de l'élément racine, vous pouvez utiliser cette solution It just works ™ avec un booléen.
la source
Utilisez ce package vue-clic-extérieur
C'est simple et fiable, actuellement utilisé par de nombreux autres packages. Vous pouvez également réduire la taille de votre bundle javascript en appelant le package uniquement dans les composants requis (voir l'exemple ci-dessous).
npm install vue-click-outside
Utilisation:
la source
Ne réinventez pas la roue, utilisez ce package v-click-outside
la source
Vous pouvez créer un nouveau composant qui gère le clic extérieur
Et utilisez ce composant:
la source
fréquemment, les gens veulent savoir si l'utilisateur quitte le composant racine (fonctionne avec tous les composants de niveau)
la source
J'ai une solution pour gérer le menu déroulant à bascule:
la source
J'utilise ce package: https://www.npmjs.com/package/vue-click-outside
Ça fonctionne bien pour moi
HTML:
Mes codes de script:
la source