實現方法：
1.操作節點： 不建議，這個方法是操作節點
代碼：
document.addEventListener('mouseup',(e) =>{
let menueBtn = document.getElementsByClassName('item-nav') //獲取 點擊 信息中心和在線預約的 btn節點
if(this.$route.path == '/'){
let _con = this.$refs.oprate1 //獲取信息中心 彈框div 的節點
if(_con) { // 信息中心的點擊子菜單和父菜單之外的div 隱藏子菜單
if(!_con.contains(e.target) && !menueBtn[0].contains(e.target)) { //判斷是否點擊的信息中心菜單btn 和彈框之外的 content
this.infoBtn = false // 為false 時關閉彈框
}
}
}
if(this.$route.path == '/makeTime'){
// 在線預約的點擊子菜單和父菜單之外的div 隱藏子菜單
let _con2 = this.$refs.oprate2 //獲取在線預約 彈框div 的節點
if(_con2) {
if(!_con2.contains(e.target) && !menueBtn[1].contains(e.target)) { //判斷是否點擊的在線預約菜單btn 和彈框之外的 content
this.onlineBtn = false // 為false 時關閉彈框
}
}
}
})
code
方法2 ：用阻止事件冒泡來實現（簡單易操作，推薦）
操作方法：
1.在底部按鈕綁定事件上面阻止事件冒泡；
2.在app.vue 里面最大div 上面綁定事件，控制彈框不顯示（控制彈框的變量狀態為false）
