el-popover实现点击空白区域关闭，弹窗区域不关闭

难点：

普通方法会无法关闭，虚拟触发会导致选一个关一个，不用visible显示的方法太麻烦。
所以结合其他人的方法，使用手动监听判断的方法（点击蓝色区域看参考，这大佬vue2的，我vue3）

注意：

在 Popover show 的时候监听 document 的 click 事件，触发进入 hidePanel 方法，判断当前点击的 el 是否在 Popover 内部，如果不在，则手动 hide Popover ，并且移除监听事件
而且关键是el-form自己不能挂ref，只能外层套一个div。第二个关键点是:teleported="false"，表单选项默认挂在body上，你得取消，挂本页面才能不选一下就关闭了

代码：

<el-form-item>
  <el-popover
    :visible="visiblePopover"
    :width="425"
    placement="bottom-start"
    trigger="click"
    @show="showEvent"
    @hide="hideEvent"
  >
    <div ref="projectButton">
      <el-form
        class="formPopover"
        label-width="64px"
        :model="queryParams"
        :inline="true"
      >
        <el-form-item prop="Sex" label="性别">
          <el-select
            v-model="queryParams.Sex"
            clearable
            filterable
            placeholder="请选择性别"
            :teleported="false"
          >
            <el-option
              v-for="item in SexList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="BuildingUp" label="圈舍">
          <el-select
            v-model="queryParams.BuildingUp"
            clearable
            filterable
            placeholder="请选择圈舍"
            :teleported="false"
          >
            <el-option
              v-for="item in BuildingUpList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="GroupName" label="栏舍">
          <el-select
            v-model="queryParams.GroupName"
            clearable
            filterable
            placeholder="请选择栏舍"
            :teleported="false"
          >
            <el-option
              v-for="item in GroupNameList"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="CowType" label="养殖类型">
          <el-select
            v-model="queryParams.CowType"
            clearable
            filterable
            placeholder="请选择养殖类型"
            :teleported="false"
          >
            <el-option
              v-for="item in CowTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="Category" label="生长阶段">
          <el-select
            v-model="queryParams.Category"
            clearable
            filterable
            placeholder="请选择生长阶段"
            :teleported="false"
          >
            <el-option
              v-for="item in CategoryList"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="RepCode" label="繁殖状态">
          <el-select
            v-model="queryParams.RepCode"
            clearable
            filterable
            placeholder="请选择繁殖状态"
            :teleported="false"
          >
            <el-option
              v-for="item in RepCodeList"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="GroCode" label="泌乳状态">
          <el-select
            v-model="queryParams.GroCode"
            clearable
            filterable
            placeholder="请选择泌乳状态"
            :teleported="false"
          >
            <el-option
              v-for="item in GroCodeList"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="Variety" label="品种">
          <el-select
            v-model="queryParams.Variety"
            clearable
            filterable
            placeholder="请选择品种"
            :teleported="false"
          >
            <el-option
              v-for="item in VarietyList"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="Color" label="花色">
          <el-select
            v-model="queryParams.Color"
            clearable
            filterable
            placeholder="请选择花色"
            :teleported="false"
          >
            <el-option
              v-for="item in ColorList"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="Lact" label="胎次">
          <el-select
            v-model="queryParams.Lact"
            clearable
            filterable
            placeholder="请选择胎次"
            :teleported="false"
          >
            <el-option
              v-for="item in LactList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="Flag" label="在场状态">
          <el-select
            v-model="queryParams.Flag"
            clearable
            filterable
            placeholder="请选择在场状态"
            :teleported="false"
          >
            <el-option
              v-for="item in FlagList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="StartTime" label="进场时间">
          <el-date-picker
            v-model="dateList"
            :clearable="true"
            type="daterange"
            unlink-panels
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="dateChange"
            :teleported="false"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #reference>
      <el-button @click="visiblePopover = !visiblePopover"
        >更多搜索</el-button
      >
    </template>
  </el-popover>
</el-form-item>


const projectButton: Ref = ref(null);
let visiblePopover = ref(false);
const showEvent = () => {
  document.addEventListener("click", hidePanel, false);
};
const hideEvent = () => {
  document.removeEventListener("click", hidePanel, false);
};
const hidePanel = (e: any) => {
  if (!projectButton.value.contains(e.target)) {
    visiblePopover.value = false;
    hideEvent();
  }
};