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