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;

},

哈哈，有问题，离开当前组件 不移除事件的话 document在所有里面都有click事件了，离开要移除！！

 

hideEmoji(e) {
         if (!this.$refs.emoji.contains(e.target)) {
        this.getEmoji = false;
         }
    },

mounted() {
      //这个控制的话点击重进会报错！！但不影响功能
      //终于知道为啥报错了，因为在document绑定后离开，没有移除document的click事件
      //这个组件外的组件可是没有 this.$refs.emoji 的
      document.addEventListener("click",this.hideEmoji)
  },
  beforeDestroy () {
      //离开这个组件必须移除掉，不然其它组件会报错！
      document.removeEventListener("click",this.hideEmoji)
  },