vue点击盒子外关闭盒子

引言

在实际开发中，可能会有点击某个元素以外的元素时让这个元素隐藏或关闭的需求

如下图所示：

        点击“显示盒子”后，会出现一个红色的盒子， 这时候再点击该页面除了红色盒子外的任意位置（除了部分事件），红色盒子会消失

    
实现步骤

1.添加按钮：

clickbox 方法用于切换盒子的显示状态，并设置样式以提升用户体验。

2.盒子或者其他：

使用 v-show 来控制盒子的显示与隐藏，ref 用于引用 DOM 元素，方便在方法中进行操作，设置样式。

3.定义：

isShowbox 的初始值为 false，用于控制盒子的显示状态。

4.生命周期函数：

        created()：在组件创建时添加全局点击事件监听器。

        beforeDestroy()：在组件销毁前移除事件监听器，防止内存泄漏。

5.点击事件方法：

用于处理用户交互，例如切换盒子的显示状态。

6.handleClickOutside(e)：

该方法判断点击是否在弹窗区域外，如果是，则将对应的显示状态设置为 false，以隐藏弹窗。

7.代码

<template>
  <div class="boxs">
    <div class="box">

      <!-- 1. 显示盒子的按钮，点击后触发clickbox方法，切换盒子显示状态 -->
      <div class="btn">
        <button @click.stop="clickbox1">显示盒子</button>
      </div>

      <!-- 2. 显示的盒子，v-show 控制其显示与隐藏，使用 ref 方便在方法中访问 -->
      <div class="chat-logs-box" v-show="isShowbox" ref="showPanelbox1"></div>

    </div>
  </div>
</template>

<script>
export default {
  name: "testView",
  data() {
    return {
      // 3. 定义 isShowbox 状态，控制盒子的显示与隐藏
      isShowbox: false,

    };
  },

// 4. 生命周期钩子
  created() {
    document.addEventListener('click', this.handleClickOutside);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside);
  },

  methods: {

    // 5. 切换盒子的显示状态
    clickbox1() {
      this.isShowbox = !this.isShowbox;
    },

    // 6. 点击外部区域时隐藏盒子
    handleClickOutside(e) {
      if (this.$refs.showPanelbox1 && !this.$refs.showPanelbox1.contains(e.target)) {
        this.isShowbox = false;
      }
    }

  }
};
</script>


<style>
.boxs {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.box {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 600px;
  height: 600px;
  margin: 50px auto;
  background-color: #ededed;
  border-radius: 20px;
}

.chat-logs-box {
  width: 400px;
  height: 400px;
  background-color: red;
  border: 1px solid #f5f5f5;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
}

</style>