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