vue點擊除了某組件本身的其它地方, 隱藏該組件的方法

點擊emoji表情標簽, 出現標簽組件,點擊其它地方, 改組件消失的效果;

<template>
  <div class="writeZoon">
    <div class="top">
      <span class="icon iconfont icon-smiling" @click.stop="emojiShow"></span> //1 綁定點擊事件
      <span class="icon iconfont icon-wenjianjia"></span>
      <span class="icon iconfont icon-jiandao"></span>
      <span class="icon iconfont icon-xiaoxi"></span>
    </div>
    <div class="bottom"></div>
    <div class="emojiBox" v-show="emoji" >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      emoji: false
    };
  },
  methods: {
    emojiShow() {
      var that = this;
      this.emoji = true;
      console.log('emoji');
      function emojiDisShow(){
     //改變數據 重要的是在body上綁定事件, 讓數據變成false, 最重要的是阻止點擊emoji標簽時候禁止冒泡到body上,所以用stop,   
        that.emoji = false;
        document.body.removeEventListener('click',emojiDisShow)//消失后,為了性能,取消body這個事件就可以了
      }
      document.body.addEventListener('click',emojiDisShow);
    }
  }
};
</script>