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

科技前沿 • 2025-01-25 18:52 • 阅读 61

大家好，我是讯享网，很高兴认识大家。

要做一个消息显示按钮，点击按钮之后消息框弹出。直接用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); }

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

相关推荐