vue3 element+ popover弹出框点击判断后显示和隐藏

在 Vue3 中使用 Element Plus 的 Popover 组件，与 Vue2 中的使用方式略有不同。以下是在 Vue3 中使用 Element Plus Popover 组件进行点击判断后显示和隐藏的具体步骤：

1. 在需要触发弹出框的元素上，添加 `@click` 事件监听器，例如：

   <el-button @click="showPopover">点击弹出框</el-button>

2. 在 `setup` 函数中定义一个 `ref` 变量，用于控制弹出框的显示和隐藏状态，例如：

   import { ref } from 'vue'
   
   export default {
     setup() {
       const isPopoverVisible = ref(false)
       
       const showPopover = () => {
         isPopoverVisible.value = true
       }
       
       return {
         isPopoverVisible,
         showPopover
       }
     }
   }

3. 在需要显示弹出框的元素上，添加 `v-popover` 指令，并绑定 `isPopoverVisible` 变量，例如：

   <el-button v-popover:pop="{ visible: isPopoverVisible }">点击弹出框</el-button>

4. 在弹出框组件上，添加 `v-model:visible` 指令，并绑定 `isPopoverVisible` 变量，例如：

   <el-popover v-model:visible="isPopoverVisible">
     <p>这是弹出框的内容</p>
   </el-popover>

这样，在点击元素时，弹出框就会显示出来，再次点击元素时，弹出框就会隐藏起来。需要注意的是，在 Vue3 中需要使用 `v-popover:pop` 指令来绑定 Popover 组件，而 `v-model:visible` 指令用于控制弹出框的显示和隐藏状态。