需求：點擊空白區(qū)域關閉彈窗婉商，同時點擊事件生效
場景：彈窗沒有模態(tài)層
1.彈窗位置阻止事件
<div @click.stop >
<Menu></Menu>
</div>
- mounted注冊點擊事件
mounted() {
document.addEventListener("click", this.bodyCloseMenus);
},
- methods寫需要處理邏輯
bodyCloseMenus(e) {
let self = this;
if (self.menuIsShow == true){
self.menuIsShow = false;
this.$store.commit('menuIsShowFn' , self.menuIsShow )
}
},
- 注銷
beforeDestroy() {
document.removeEventListener("click", this.bodyCloseMenus);
},
附： 我是組件內彈窗 ，走vuex保存狀態(tài)
computed: {
menuIsShowHomeFn: function () {
return this.$store.state.common.menuIsShow
},
},
watch:{
menuIsShowHomeFn( val ){
this.menuIsShow = val
}
},
歡迎各位大佬提出寶貴改進意見。。。
