VUE+element pover点击显示和点击空白区域隐藏

要做一个消息显示按钮，点击按钮之后消息框弹出。直接用element的pover做的，给data加一个pover：false，点击的时候修改为pover=！pover就可以点击按钮关闭和显示了。

后来又要做一个点击空白区域隐藏。

首先消息框弹出之后，点击空白隐藏，我第一时间想到的是点击这个消息之框之外的区域。

直接一个点击事件然后传e.target，然后再判断点击区域包不包含这个消息框。结果有问题，百度了一下代码如下。

首先要在mounted阶段绑定一个全局的点击事件监听

mounted(){
    document.addEventListener('click',this.closePover)
}

接着写自己关闭方法

methods:{
    closePover(e){
    //传递事件源
    let self = this
    //判断当前消息框是否为显示状态以及点击区域是否为空白区域
    if(this.pover && !this.$refs.pover.contains(e.target)){
    this.pover = false
}
    }
}

结果还是不行，后来看别人的代码，发现还在消息按钮的点击事件还写了@click.stop

这是按钮的HTML

 <div class="msg" @click.stop="pover = !pover">

这是消息框的HTML

<div class="pover" v-show="pover" @click="closeMsg" ref="pover">

加了.stop会组织冒泡事件，但是为什么需要组织冒泡事件我也不是很清楚。

最后还要在destory阶段销毁事件监听

destroyed() {
    document.addEventListener('click', this.closeMsg);
  }

接下来是完整代码

<div class="msg" @click.stop="pover = !pover">
        <el-badge :value="msgNum" class="item">
          <img src="@/assets/myMessage.png" alt="" />
        </el-badge>
</div>
<div class="pover" v-show="pover" @click="closeMsg" ref="pover">
//消息框内容
</div>

data(){
    return {
    pover:false
} 

}
mounted() {
    
    document.addEventListener('click', this.closeMsg);
  },
method:{
closeMsg(e) {
      let self = this;
      if (self.pover === true && !this.$refs.pover.contains(e.target)) {
        self.pover = false;
      }
    }
   
},
destroyed() {
    document.addEventListener('click', this.closeMsg);
  }