element plus el-popover气泡卡片既要手动控制显示又要点击空白处消失

记录一个项目时遇到的问题，点击其他按钮也能显示气泡卡片，然后，点击空白处又能消失

官网的属性说明：trigger 属性被用来决定 popover 的触发方式，支持的触发方式： hover、click、focus 或 contextmenu。 如果你想手动控制它，可以设置 :visible 属性。

想要手动控制只能用:visible属性，但是！这个:visible 属性不灵活不好控制，点击显示后不能点击空白处消失。。。这时候可以用ref，下面是代码

    <el-popover
          placement="bottom"
          title="Title"
          :width="200"
          trigger="click"
          ref="setShowData"
        >
        <template #reference>
          <el-button>点击显示气泡卡按钮</el-button>
        </template>
        <div>
          <span>我是卡片中的显示内容</span>
        </div>
    </el-popover>
    <el-button @click="showData">我是另外的按钮我也要显示气泡卡</el-button>

    ...

<script setup>
    import { ref } from 'vue'

    const setShowData =ref(null)

    function showData() {
      setShowData.value.show() 
      console.log('setShowData.value',setShowData.value) 
      //把方法打印出来能看到有很多自带的方法，想要显示就.show() ，想要隐藏就.hide()
}
</script>

这是效果图：