vue3 写一个点击弹框之外的区域关闭弹框

好的，以下是实现的思路：

1. 在需要弹框的组件中添加一个点击事件，用来控制弹框的显示和隐藏。

2. 在弹框外面包裹一个 div，用来监听点击事件。

3. 在监听的事件中，判断点击的区域是否在弹框内部，如果不在则隐藏弹框。

4. 在组件销毁时，解绑事件监听。

以下是示例代码：

<template>
  <div>
    <button @click="showModal">显示弹框</button>
    <div class="modal" v-show="show">
      <div class="modal-content" ref="modal">
        <p>这是一个弹框</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    showModal() {
      this.show = true;
      document.addEventListener("click", this.hideModal);
    },
    hideModal(e) {
      if (!this.$refs.modal.contains(e.target)) {
        this.show = false;
        document.removeEventListener("click", this.hideModal);
      }
    },
  },
  beforeUnmount() {
    document.removeEventListener("click", this.hideModal);
  },
};
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
}

</style>

在这个示例中，我们在弹框外面包裹了一个 div，并添加了一个 ref 属性，用来在判断点击区域时获取该元素的引用。在 showModal 方法中，我们添加了一个事件监听器，用来在点击弹框外面的区域时隐藏弹框。在 hideModal 方法中，我们判断当前点击的区域是否在弹框内部，如果不在则隐藏弹框，并移除事件监听器。在组件销毁时，我们也需要移除事件监听器。