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);}