Vue js 메뉴 외부를 클릭했을 때 부트 스트랩 드롭 다운 메뉴를 닫는 방법
Dec 18 2020
사용자가 드롭 다운 메뉴 외부를 클릭 할 때 드롭 다운 메뉴를 닫으려고합니다.
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
내가 시도한 것은 클릭시 본문에 addeventlistener를 추가하고 닫을 때 이벤트를 제거하는 것입니다. Body Event가 트리거되지 않습니다. 본문 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');
});
}
}
나는 지시문으로 시도했지만 작동하지 않습니다.
<body class="container-fluid p-0" v-my-directive="1">\
<body
답변
BLPraveen Dec 18 2020 at 00:08
내 문제를 해결 한 코드 아래
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);
},