vue点击其它页面 弹出层消失
Posted kimm
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue点击其它页面 弹出层消失相关的知识，希望对你有一定的参考价值。
遇到一个问题，点击表情图标，弹出表情框，点击其它部分就应该隐藏
首先，给子组件包一层
<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点击其它页面 弹出层消失的主要内容，如果未能解决你的问题，请参考以下文章