vue中如何實現點擊除了自己元素及其內部元素之外都將自身元素隱藏的功能

1.目標元素佈局

<template>
  <div id="emoji">
    <span class="emoji-icon"></span>
    <img
      class="emoji-icon"
      @click.stop="handleShowEmoji"
      src="../../static//images/icon/emoji.png"
      alt="表情包"
    />
    <div v-show="showEmoji" ref="emojipicker" class="emoji-picker">
      <VEmojiPicker :pack="emojisNative" @select="selectEmoji" />
    </div>
  </div>
</template>

2.在create監聽點擊事件，計算鼠標點擊時所在的位置與目標元素的關係判斷出該目標元素是否顯示隱藏。

created() {
    const _this = this;
    document.addEventListener("click", event => {
      event = event || window.event;
      //得到目標元素的位置信息
      let target = this.$refs.emojipicker.getBoundingClientRect();
      //判斷之間的關係：如果點擊的x座標在目標位置left、right之間and點擊的y座標在目標位置的top、bottom之間則證明在元素內點擊，否則則在元素外點擊
      if (
        target.left < event.clientX &&
        event.clientX < target.right &&
        target.top < event.clientY &&
        event.clientY < target.bottom
      ) {
        _this.showEmoji = true;
      } else {
        _this.showEmoji = false;
      }
    });
  }