关于elementplus el-popover的visible与click冲突问题

需求

这里需要做一个popover弹框，在弹框内部点击叉号或者跳转功能可以进行弹框的关闭及跳转时弹窗的关闭

遇见的问题

我使用了elementplus的el-popover组件，起初我定义了trigger：‘click’，但发现无法满足叉号和点击跳转的功能。此时我转而使用了visible功能（这个功能是el-popover上本身就存在的），可当我这样使用之后我发现我的visible不起作用，也就是说，同时使用trigger方法和visible，则visible不会生效。
这之后我大量查阅发现elementplus提供了虚拟触发功能：

<template>
  <el-button ref="buttonRef" v-click-outside="onClickOutside">
    Click me
  </el-button>

  <el-popover
    ref="popoverRef"
    :virtual-ref="buttonRef"
    trigger="click"
    title="With title"
    virtual-triggering
  >
    <span> Some content </span>
  </el-popover>
</template>

<script setup lang="ts">
import { ref, unref } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'

const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}
</script>

但是这个功能依然无法满足我的需求，它可以做到点击叉号和跳转时关闭，但对于点击非popover框的功能还需要使用监听来实现。所以依旧被我舍弃了。
这个时候一筹莫展的我又使用了最粗暴的方式：display：none，直接对popover框进行 显示隐藏操作，确实可以生效，也可以和trigger一起使用：

但是这时又出现了问题：我想再次出发popover弹框，需要点击两次才能触发，直接在元素上使用 display: none 会导致组件状态与 DOM 状态不一致。
所以依旧不可行。最后经过大量查找，我找到了一个方法，通过对popover的ref进行操作隐藏即可。最终满足需求，代码如下：

<el-popover
      placement="bottom"
      title="123"
      :width="600"
      style="position: relative"
      trigger="click"
      ref="popoverRef"
    >
    //中间内容不赘述了，就只看头部
</el-popover>

const popoverRef = ref(null)
const closePopover = () => {
  popoverRef.value.hide();
}

上述代码即可实现。