记一次需求Bug的踩坑-element-plus el-popover 点击空白处关闭

近期公司开发新项目，需要基于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，这个时候就会发现当点击空白的时候，窗口不会关闭，就很烦躁，本来以为加个属性就好了，结果这个问题我百度了好久好久，都想放弃了，最后终于让我解决了，废话不多说，直接上代码吧~

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

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