Implementation:
1. operation node: Not recommended, this method is operating node
Code:
document.addEventListener('mouseup',(e) =>{
let menueBtn = document.getElementsByClassName ( 'item-nav') // btn acquired click information center node and the online booking
if(this.$route.path == '/'){
let _con = this. $ refs.oprate1 // node obtains the information center of the bomb box div
if div outside (_con) {parent menu and sub-menu click on Information Center // hide submenu
if (! _ con.contains (e.target) &&! menueBtn [0] .contains () e.target) content {// determine whether the click outside the information center frame and spring menus btn
this.infoBtn = false // Close box shells is false
}
}
}
if(this.$route.path == '/makeTime'){
div outside // online reservations click menus and sub-menus father hide submenu
let _con2 = this.$refs.oprate2 //获取在线预约 弹框div 的节点
if(_con2) {
if(!_con2.contains(e.target) && !menueBtn[1].contains(e.target)) { //判断是否点击的在线预约菜单btn 和弹框之外的 content
this.onlineBtn = false // 为false 时关闭弹框
}
}
}
})
方法2 ：用阻止事件冒泡来实现（简单易操作，推荐）
操作方法：
1.在底部按钮绑定事件上面阻止事件冒泡；
2.在app.vue 里面最大div 上面绑定事件，控制弹框不显示（控制弹框的变量状态为false）
