在 Vue 中实现点击空白区域关闭弹窗的功能，通常的做法是监听 click 事件，并判断点击事件是否发生在弹窗的外部。以下是一个基本的实现步骤：

1. 给弹窗的外层容器添加一个 ref 属性，例如 ref="popup"。

2. 在弹窗组件的 mounted 钩子函数中，添加一个全局的 click 事件监听器。

3. 在事件监听器的回调函数中，使用 event.target 来判断点击是否发生在弹窗元素或其子元素之外。

4. 如果点击发生在弹窗之外，则关闭弹窗。

5. 在组件的 beforeDestroy 钩子函数中，移除全局的 click 事件监听器。

以下是一个示例代码：

<template>
  <div>
    <!-- 弹窗外层容器 -->
    <div v-if="isPopupVisible" ref="popup">
      <!-- 弹窗内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPopupVisible: false
    };
  },
  mounted() {
    document.addEventListener('click', this.handleClickOutside);
  },
  //vue3
  beforeUnmount() {
    document.removeEventListener('click', this.handleClickOutside);
  },
//  vue2
  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside);
  },
  methods: {
    handleClickOutside(event) {
      // 如果点击的是弹窗内部或者弹窗本身，则不做任何操作
      if (this.$refs.popup && !this.$refs.popup.contains(event.target)) {
        this.isPopupVisible = false;
      }
    }
  }
};
</script>

在这个示例中，当 isPopupVisible 为 true 时，弹窗是可见的。handleClickOutside 方法会检查点击事件的目标是否不是弹窗本身或其子元素。如果不是，那么将 isPopupVisible 设置为 false，从而关闭弹窗。