vue2点击页面空白处关闭气泡

重点部分：

HTML代码：

<div @click="closePopover">
        <el-col :span="6" v-for="(item, index) in createdModule" :key="index" style="position: relative;">
          <div class="grid-content">
            <div class="moduleTop">
              <div class="moduleTopTitle">
                <div class="moduleTitle">{{ item.name }}</div>
                <div class="moduleID">卡片ID: {{ item.id }}</div>
              </div>
              <div class="moduleImg">
                <img src="./images/defaultImg.png" class="defaultImg" />
              </div>
            </div>
            <div class="bgImgDoc"></div>
            <div class="moduleBot">
              <img src="./images/transmit.png" class="iconStyle" />
              <img src="./images/del.png" class="iconStyle" style="cursor: pointer;" @click.stop="popoverIconBtn(item)" />
            </div>
          </div>
          <div class="popoverBox" v-if="item.popoverFlag">
            <div class="editPopover">
              <img src="@/assets/icon/edit.png" class="popoverIconStyle" />
              <span>编辑</span>
            </div>
            <div class="delPopover" @click="delPopover">
              <img src="@/assets/icon/del.png" class="popoverIconStyle" />
              <span>删除</span>
            </div>
          </div>
        </el-col>
      </div>

JS代码：

mounted() {
    document.addEventListener('click', this.closePopover);
},
methods:{
    popoverIconBtn(item) {
        // 关闭其他气泡
        this.createdModule.forEach((module) => {
            if (module !== item) {
                  module.popoverFlag = false;
           }
        });
        // 打开当前气泡
        item.popoverFlag = true;
        this.delPopoverId = item.id;
    },
    closePopover(event) {
        // 点击页面空白处关闭气泡
        this.createdModule.forEach((module) => {
            if (module.popoverFlag && !event.target.closest('.popoverBox')) {
                module.popoverFlag = false;
            }
        });
    },
}