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

如果要在 Vue 3 中实现点击弹框之外的区域关闭弹框的功能，可以这样做：

1. 在组件的模板中，包含一个用于显示弹框的元素，并且将该元素的 `ref` 属性设置为 `popup`。这样可以使用 `this.$refs.popup` 来访问该元素。

2. 在组件的 `mounted` 生命周期钩子函数中，使用 `addEventListener` 方法为 `document` 对象添加一个 `click` 事件监听器。在事件监听器中，判断点击的元素是否在弹框内，如果不是，则关闭弹框。可以使用 `contains` 方法来判断一个元素是否包含另一个元素。

3. 在组件的 `beforeUnmount` 生命周期钩子函数中，使用 `removeEventListener` 方法移除之前添加的事件监听器。

下面是一个示例代码：

<template>
  <div ref="popup" v-if="isShow">
    <!-- 弹框的内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false, // 用于控制弹框是否显示
    }
  },
  mounted() {
    // 为 document 对象添加 click 事件监听器
    document.addEventListener('click', this.handleDocumentClick)
  },
  beforeUnmount() {
    // 移除之前添加的事件监听器
    document.removeEventListener('click', this.handleDocumentClick)
  },
  methods: {
    // 处理 document 对象的 click 事件
    handleDocumentClick(event) {
      // 如果点击的元素不