Vue js Comment fermer le menu déroulant bootstrap lorsque vous cliquez en dehors du menu
Dec 18 2020
J'essaie de fermer le menu déroulant lorsque l'utilisateur clique en dehors du menu déroulant
header_component.vue
<div class="dropdown d-inline-block">
<a href="#" class="logo logo-dark">
<a href="javascript:void(0);" class="Logo-plus" @click="toggleMainMenu()">+</a>
<span class="logo-lg">
<img src="" alt="" height="25" id="topnav_heading_image">
</span>
</a>
<div class="dropdown-menu dropdown-menu-right" style="left: 0;right: auto;" v-bind:class="show_main_menu ? 'd-block' : ''">
..............
</div>
</div
ce que j'ai essayé est jusqu'à présent d'ajouter addeventlistener au corps en cliquant et removeEventListener l'événement à la fermeture. L'événement corporel n'est pas déclenché. Comment ajouter un événement au body onclick?
methods:{
toggleMainMenu(){
this.show_main_menu = !this.show_main_menu;
this.show_sub_menu = false;
this.setBodyClass();
},
openSubMenu(menu_key){
let formData = new FormData();
formData.append("access_token", window.settings.access_token);
formData.append('menu_key',menu_key);
this.show_main_menu = false;
axios.post('/api/get_sub_menus', formData).then((response) => {
if(response.is_sub_menu == 0){
window.location.href = response.route;
}else{
this.sub_menus = _.chunk(_.toArray(response.data.sub_menu), 3);
this.show_sub_menu = true;
}
});
},
setBodyClass() {
var body = document.body;
body.classList.toggle('open');
if(this.show_main_menu){
body.addEventListener('click', e => {
this.toggleMainMenu;
});
} else {
body.removeEventListener('click', e => {
console.log('closed');
});
}
}
},
directives: {
"my-directive": {
bind: function(el, binding) {
alert('hello');
this.el.addEventListener('click', e => {
this.toggleMainMenu;
});
},
unbind: function(el) {
// Remove Event Listener
this.el.removeEventListener('click', e => {
console.log('closed');
});
}
}
J'ai essayé avec des directives aussi ça ne marche pas
<body class="container-fluid p-0" v-my-directive="1">\
<body
Réponses
BLPraveen Dec 18 2020 at 00:08
Le code ci-dessous a résolu mon problème
mounted(){
document.addEventListener('click', this.close);
},
methods:{
toggleMainMenu(){
this.show_main_menu = !this.show_main_menu;
this.show_sub_menu = false;
},
openSubMenu(menu_key){
let formData = new FormData();
formData.append("access_token", window.settings.access_token);
formData.append('menu_key',menu_key);
this.show_main_menu = false;
axios.post('/api/get_sub_menus', formData).then((response) => {
if(response.is_sub_menu == 0){
window.location.href = response.route;
}else{
this.sub_menus = _.chunk(_.toArray(response.data.sub_menu), 3);
this.show_sub_menu = true;
}
});
},
close (e) {
if (!this.$el.contains(e.target)) {
this.show_main_menu = false;
}
}
},
beforeDestroy () {
document.removeEventListener('click',this.close);
},