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

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

1、vue模块中的内容

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

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是弹窗的遮罩背景。

这下大家都明白了吧! :-)

转载于:https://www.cnblogs.com/toggle/p/9375679.html

你可能感兴趣的:(vue2.0中点击其他区域关闭弹窗)