在Vue中点击某个元素以外的元素时让这个元素隐藏或关闭

在实际开发中，可能会有点击某个元素以外的元素时让这个元素隐藏或关闭的需求。在Vue中实现则更加简单。

思路

为全局document添加click事件，判断是否为指定节点及其子节点，如果不是则隐藏该指定节点。

例如

• 当前组件现有功能是：span默认不显示，当点击button时显示span。点击非span button时span消失

<template>
  <div>
    <span v-show="isShow" ref="showPanel">没点击我我就消失了哦</span>
    <button @click.stop="isShow = true">显示</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: false
    };
  },
  created() {
    document.addEventListener("click", e => {
      if (this.$refs.showPanel) {
        let isSelf = this.$refs.showPanel.contains(e.target);
        if (!isSelf) {
          this.isShow = false;
        }
      }
    });
  }
};
</script>