记一次需求Bug的踩坑-element-plus el-popo

近期公司开发新项目，需要基于vue3+element-plus开发，一直在用vue2开发,刚开始听到还挺焦虑，不过写着写着就还好吧~最开始也遇到了很多坑，也没来得及记录下来，等后面有空了再整理一下，今天先记一下element-plus里面el-popover遇到的坑。
先说一下需求，在table-header里放置一个按钮，用户点击按钮会弹出一个气泡对话框，里面包含取消，确认按钮，当用户按取消，确认按钮对话框会关闭，点击其他空白处也会关闭。
根据UI提供的样式，使用了el-popover组件，它可以自定义内容，放置我们想要的，这里trigger 属性被用来决定 popover 的触发方式，支持的触发方式： hover、click、focus 或 contextmenu。 如果你想手动控制它，你可以设置 v-model:visible，如果我们想要添加取消确认按钮去控制它，设置了 v-model:visible，这个时候就会发现当点击空白的时候，窗口不会关闭，就很烦躁，本来以为加个属性就好了，结果这个问题我百度了好久好久，都想放弃了，最后终于让我解决了，废话不多说，直接上代码吧~

<template>
 <el-popover trigger="click" ref="setRemovePop" placement="top" :width="160">
   <p>Are you sure to delete this?</p>
   <div style="text-align: right; margin: 0">
     <el-button size="small" text @click="cancelRemove()">取消</el-button>
     <el-button size="small" type="primary" @click="cancelRemove()"
       >确定</el-button
     >
   </div>
   <template #reference>
     <el-button >Delete111</el-button>
   </template>
 </el-popover>
</template>

<script  setup>
import { ref,onMounted } from 'vue'
let setRemovePop = ref(null);
const cancelRemove = ()=>{
     setRemovePop.value.hide();
}

</script>

看到代码，大家应该懂了吧，主要用了ref和它自带的hide方法。

参考出处：踩坑记24 el-form label 对齐方式 | v-click-outside 组件外点击触发 | el-popover click激活 点击外部/取消隐藏 element-plus