Je suis codant un menu contextuel simple dans VUE.J. Lorsque j'ai un clic droit sur un élément particulier, il ouvre le menu (à l'aide de @ contextmendu.prevent) .Cela fonctionne.
Mais quand je clique à l'extérieur du menu, je veux que cela disparaisse. Cela ne fonctionne pas ... J'utilise V-on: flou pour cela, a également essayé @blur. Aucun d'entre eux ne fonctionne pas. Voici mon HTML: P>
methods: {
setMenu(top, left) {
this.top = top - 170 + "px";
this.left = left + "px";
},
// opening menu : calling set menu whith x and y
openContextMenuTrack(track, event) {
this.openedMenu = "contextMenuTrack";
this.targetOfMenu = track;
this.$nextTick((() => {
this.$refs.contextMenuTrack.focus();
this.setMenu(event.y, event.x);
}).bind(this));
},
closeMenu() {
this.openedMenu = undefined;
this.targetOfMenu = undefined;
}
}
3 Réponses :
Le Votre problème est généralement résolu en créant une directive personnalisée qui crée une méthode Lorsque vous cliquez à l'extérieur du menu. quelque chose comme ceci: https://www.npmjs.com/package/v-click-outide espère que cela aide edit: Un exemple avec un meilleur paquet ( Vue-Clickaway ): flou n'existe que pour les commandes de formulaire (
Merci beaucoup. Je vais vérifier V-Click-à-l'air, si cela fonctionne, je validerai votre réponse :)
Cela n'a pas fonctionné vraiment bien. En fait, lorsque je clique à l'extérieur de l'élément, le menu se ferme. Mais lorsque je clique sur une option du menu, le menu se ferme sans effectuer l'action liée à cette option. Aucun conseil?
J'ai ajouté un exemple avec un meilleur paquet à ma réponse ci-dessus
Cela aiderait si vous recherchez une manière non recommandée;) $ REFS serait délicat d'avoir le même résultat.
let x = document.querySelector('.targetClass).addEventListener('click', (e) =>
{
if(e.target.className == 'targetClass') {
this.close()
}
})
Je viens de le faire sur un projet:
created: function() {
let self = this;
window.addEventListener("click", function(e) {
if (self.$el.querySelector('.targetClass') && !self.$el.querySelector('.targetClass').contains(e.target)) {
this.close()
}
});
},
destroyed: function(){
let self = this;
window.removeEventListener("click", function(e) {
if (self.$el.querySelector('.targetClass') && !self.$el.querySelector('.targetClass').contains(e.target)) {
this.close()
}
});
},