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

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