vue2实现Popup弹出层点击空白处关闭

在 Vue 2 中实现 Popup 弹出层点击空白处关闭的功能，可以通过以下步骤实现：

1. 在 Popup 组件中添加一个遮罩层，并绑定一个点击事件，当点击事件触发时，执行关闭 Popup 的方法。

2. 在子组件中添加一个 `$emit` 方法，当点击子组件内部的区域时，触发 `$emit` 方法，向父组件发送一个事件。

3. 在父组件中监听子组件发送的事件，当事件触发时，执行关闭 Popup 的方法。

下面是一个示例代码：

<!-- Popup 组件 -->
<template>
  <div class="popup" v-show="visible">
    <div class="mask" @click="close"></div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    close() {
      this.$emit('close');
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div class="child" @click="$emit('clickInside')">
    ...
  </div>
</template>

<!-- 父组件 -->
<template>
  <div>
    <popup :visible="showPopup" @close="closePopup">
      <child @clickInside="stopPropagation"></child>
    </popup>
  </div>
</template>

<script>
import Popup from './Popup.vue';
import Child from './Child.vue';

export default {
  components: {
    Popup,
    Child
  },
  data() {
    return {
      showPopup: false
    };
  },
  methods: {
    closePopup() {
      this.showPopup = false;
    },
    stopPropagation() {
      // 阻止事件冒泡
      event.stopPropagation();
    }
  }
};
</script>

在这个示例中，当点击 Popup 组件外的区域时，会触发 Popup 组件中的 `close` 方法，从而关闭 Popup 组件。当点击 Popup 组件内部的子组件时，会触发子组件中的 `$emit` 方法，从而向父组件发送一个事件。在父组件中通过监听子组件发送的事件来阻止事件冒泡，从而避免触发 Popup 组件中的 `close` 方法。