vue实现点击空白区域关闭弹窗


效果展示

通过contains判断点击区域是否包含弹框

1. <template>
   
2.   <div ref="list">
   
3.       <span @click="is_list_show=!is_list_show">点击</span>
   
4.       <ul class="head-list-select" v-if="is_list_show">
   
5.         <li>菜单1</li>
   
6.         <li>菜单2</li>
   
7.         <li>菜单3</li>
   
8.         <li>菜单4</li>
   
9.         <li>菜单5</li>
   
10.       </ul>
    
11.   </div>
    
12. </template>

复制代码

点击页面判断

1. mounted(){
   
2.         document.addEventListener("click", this.bodyCloseMenus)
   
3. },
   
4. beforeDestroy() { // 在页面注销前，删除点击事件
   
5.         document.removeEventListener("click", this.bodyCloseMenus);
   
6. },
   
7. methods: {
   
8.         bodyCloseMenus(e){
   
9.                 let btnstatus = this.$refs['list'];
   
10.                 if(btnstatus &&!btnstatus.contains(e.target)){
    
11.                         this.is_list_show = false;
    
12.                 }
    
13.         }
    
14. },

复制代码

刚开始写的时候只想到这种方法，后来百度了一下还有一种通过阻止冒泡@click.stop来实现，尝试了一下可以实现，顺便就记录一下~

1. <template>
   
2.   <div ref="list" @click.stop>
   
3.       <span @click="is_list_show=!is_list_show">点击</span>
   
4.       <ul class="head-list-select" v-if="is_list_show">
   
5.         <li>菜单1</li>
   
6.         <li>菜单2</li>
   
7.         <li>菜单3</li>
   
8.         <li>菜单4</li>
   
9.         <li>菜单5</li>
   
10.       </ul>
    
11.   </div>
    
12. </template>

复制代码

1. mounted(){
   
2.         document.addEventListener("click", this.bodyCloseMenus)
   
3. },
   
4. beforeDestroy() {
   
5.         document.removeEventListener("click", this.bodyCloseMenus);
   
6. },
   
7. methods: {
   
8.         bodyCloseMenus(e){
   
9.                 let self = this;
   
10.              if (self.is_list_show == true){
    
11.                   self.is_list_show = false;
    
12.              }
    
13.         }
    
14. },

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源：https://www.jb51.net/javascript/339883r67.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！