需求：点击空白区域关闭弹窗，同时点击事件生效
场景：弹窗没有模态层
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保存状态
computed: {
menuIsShowHomeFn: function () {
return this.$store.state.common.menuIsShow
},
},
watch:{
menuIsShowHomeFn( val ){
this.menuIsShow = val
}
},
欢迎各位大佬提出宝贵改进意见。。。
