vue3手动关闭 el-popover

### 如何在 Vue3 中手动关闭 Element Plus 的 `el-popover` 组件

为了实现手动关闭 `el-popover` 功能，在使用过程中可以通过绑定可见性属性并控制该属性来达到目的。具体来说，通过设置 `v-model:visible="popoverVisible"` 来双向绑定弹窗的显示状态，并提供一个方法用于改变这个布尔值的状态。

下面是一个简单的例子展示如何操作：

<template>
  <div>
    <!-- 使用 v-model 控制 popover 显示 -->
    <el-button @click="togglePopover">Toggle Popover</el-button>

    <el-popover
      :visible.sync="isPopoverVisible"
      placement="top-start"
      title="Title"
      width="200"
      trigger="manual">
      
      Content of the popover.
    
      <template #reference>
        <el-button>Reference Button</el-button>
      </template>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 定义是否显示 popover 的变量
const isPopoverVisible = ref(false);

function togglePopover() {
  // 切换 visible 属性的值以打开或关闭 popover
  isPopoverVisible.value = !isPopoverVisible.value;
}
</script>

在这个案例里，当点击按钮时会触发 `togglePopover()` 方法，进而反转 `isPopoverVisible` 变量的真假值，从而实现弹框的手动开启和关闭功能[^1]。