码迷,mamicode.com
首页 > 其他好文 > 详细

vue点击其它页面 弹出层消失

时间:2019-04-06 09:39:54      阅读:274      评论:0      收藏:0      [点我收藏+]

标签:OLE   show   会点   listener   class   this   log   mon   bsp   

遇到一个问题,点击表情图标,弹出表情框,点击其它部分就应该隐藏

 

首先,给子组件包一层

<div ref="emoji">
<emoji :getEmoji="getEmoji" ref="emoji"/>
</div>
 

然后,给document元素添加点击事件,如果点击的元素不在表情框内,就隐藏

mounted() {
this.cone();
document.addEventListener("click", e => {
//console.log(this.$refs.emoji.contains(e.target));
if(!this.$refs.emoji.contains(e.target)) {
this.getEmoji = false
}
});
},

 

点击表情图标,会显示表情框,但是会冒泡,导致又发生上面事件,又把表情框隐藏了,所以会点击弹不出,应该加stop阻止冒泡

<div class="biaoqing" @click.stop="showEmoji">
<i class="iconfont icon-biaoqing"></i>
</div>
 
//表情框显示是否
showEmoji() {
this.getEmoji = !this.getEmoji;
},

vue点击其它页面 弹出层消失

标签:OLE   show   会点   listener   class   this   log   mon   bsp   

原文地址:https://www.cnblogs.com/kimm/p/10660635.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!