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="box1">
      <span v-show="isShow" ref="showPanel" class="popup" @click.stop="isShow = false">没点击我我就消失了哦</span>
      <button @click.stop="isShow = true" class="show-button">显示</button>
    </div>

    <div class="box2">

      <!--    1.添加按钮-->
      <button @click.stop="clickbox">显示盒子</button>

      <!--    2.盒子-->
      <div class="showbox" v-show="isShowbox" ref="showPanelbox"></div>

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

<script>
export default {
  name: "testView",
  data() {
    return {
      isShow: false,

      // 3.定义
      isShowbox: false,
    };
  },

  // 4.生命周期函数
  created() {
    document.addEventListener('click', this.handleClickOutside);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside);
  },
  methods: {

    // 5.点击事件方法
    clickbox() {
      this.isShowbox = !this.isShowbox; // 切换盒子的显示状态
    },

    // 6.handleClickOutside(e)
    handleClickOutside(e) {
      if (this.$refs.showPanel && !this.$refs.showPanel.contains(e.target)) {
        this.isShow = false;
      }
      if (this.$refs.showPanelbox && !this.$refs.showPanelbox.contains(e.target)) {
        this.isShowbox = false;
      }
    },
  },
};
</script>

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

.box1 {
  margin: 40px;
  width: 500px;
  height: 300px;
  background-color: #ededed;
}

.box2 {
  width: 500px;
  height: 300px;
  background-color: #ededed;
}

.showbox {
  width: 200px;
  height: 200px;
  background-color: #f00;
}

.popup {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  position: absolute;
  z-index: 1000;
}

.show-button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.show-button:hover {
  background-color: #0056b3;
}
</style>