Vue 点击空白处关闭指定div

 <div class="click" @click="handleClose">click</div>
  <div ref="box" class="list" v-show="isOpen">
    <div>5554455</div>
    <div>55555</div>
  </div>

<script>
export default {
  data() {
    return {
      isOpen: false,
    };
  },
  mounted() {
    document.addEventListener("click", this.hideBox);
  },
    methods: {
    hideBox(e) {
      // 判断是否点击需隐藏的 div 及其内部元素
      if (!this.$refs.box.contains(e.target)) {
        this.isOpen = false;
      }
    },
    handleClose() {
      setTimeout(() => {
        this.isOpen = !this.isOpen;
      });
    },
  },
  beforeDestroy() {
    document.removeEventListener("click", this.hideBox);
  },

  watch: {
    isOpen: function (oldV, newV) {
      document.addEventListener("click", this.hideBox);
    },
  },
};
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容