vue2.0中点击其他区域关闭弹窗

闲言碎语不用讲，直接上代码

1、vue模块中的内容

复制代码

<template>

<button class="btn"  @click="msg">打开弹窗</button>
<!--弹框-->
<div class="mask" v-show="msgShow" @click="closeMsg(event)">
    <div class="popup">
　　　　<button class="app-download"  @click="down">下载</button>
    </div>
</div>

</template>

复制代码

需求是点击除了下载按钮外的其他地方，关闭弹窗。

2、定义变量

data () {
   return {
        msgShow:false
    }
 }

3、方法

复制代码

    methods: {

                msg:function(){
                    this.msgShow = true;
                },
                closeMsg:function(event){
                    var btn = document.querySelector(".app-download");
                    if(btn){
                        if(!btn.contains(event.target)){            //按钮.app-download以外的区域
                            this.msgShow = false;
                        }
                    }
                },
       }

复制代码

这里要在弹窗上加一个点击事件closeMsg，实现点击其他区域关闭弹窗，这个.mask是弹窗的遮罩背景。

这下大家都明白了吧！：-）

vue2.0中点击其他区域关闭弹窗

悦读