Essayez d'utiliser v sur:flou pour faire disparaître un menu contextuel...mais ça ne fonctionne pas
Je suis le codage d'un simple menu contextuel dans vue.js. Quand je fais un clic droit sur un élément particulier, il ouvre le menu (à l'aide de @contextmenu.prévenir).Les travaux de cette.
Mais quand je clique en dehors du menu, je veux qu'il disparaisse. Cela ne fonctionne pas... je suis à l'aide de v sur:flou pour cette, également essayé @flou . Aucun d'entre eux ne fonctionne pas. Voici mon code html :
<!-- my context menu -->
<ul class="context-menu"
ref="contextMenuTrack"
v-if="openedMenu === 'contextMenuTrack'"
v-bind:style="{top: top, left: left}"
v-on:blur="closeMenu()">
<li v-on:click="removeTrack(project.structure.tracks.indexOf(targetOfMenu));closeMenu()">delete track</li>
</ul>
<div>
[ ...... stuff here ......]
<!-- Where the menu is called-->
<li class="track"
v-for="track in project.structure.tracks">
<div class="track-name-row">
<li @contextmenu.prevent="openContextMenuTrack(track,$event)"
v-on:click="expandTrack(project.structure.tracks.indexOf(track))"
class="track-color-viewer"></li>
[ .... other li tags .....]
</div>
</li>
[ ...... stuff here ......]
</div>
Voici les données utilisées pour le menu de ma Vue composant:
data() {
return {
//the kind of menu which is opened
openedMenu: undefined,
//the coordinate of the menu
top: "0px",
left: "0px",
//the element which is targeted by the menu
targetOfMenu: undefined
};
},
Et ici sont les méthodes utilisées pour le menu dans mon Vue.js composant :
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;
}
}
Vous devez vous connecter pour publier un commentaire.
la
blur
événement n'existe que pour les contrôles de formulaire (<input>
etc.).Votre problème est généralement résolu par la création d'une coutume directive qui exécute une méthode lorsque vous cliquez en dehors du menu.
Quelque chose comme ceci:
https://www.npmjs.com/package/v-click-outside
Espère que cette aide
Edit:
Un exemple avec un meilleur package (vue-clickaway):
https://jsfiddle.net/Linusborg/hqkgp4hm/
Ce serait utile si vous êtes à la recherche pour obsolète façon 😉 $refs serait difficile d'avoir le même résultat.
J'ai juste fait ce sur un projet: