element-plus如何点击空白处关闭el-popover

在Element Plus中，要使得点击空白处关闭el-popover，可以通过监听全局点击事件来实现。你需要在组件挂载后添加事件监听器，并在组件销毁前移除事件监听器。

以下是实现这一功能的示例代码：

<template>
  <el-popover
    ref="popover"
    trigger="manual"
    v-model:visible="isPopoverVisible"
    @show="onShowPopover"
    @hide="onHidePopover"
  >
    <!-- Your popover content here -->
  </el-popover>
  <div @click="togglePopover">Click to toggle popover</div>
</template>
 
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { ElPopover } from 'element-plus';
 
const isPopoverVisible = ref(false);
 
const togglePopover = () => {
  isPopoverVisible.value = !isPopoverVisible.value;
};
 
const onShowPopover = () => {
  document.addEventListener('click', handleDocumentClick);
};
 
const onHidePopover = () => {
  document.removeEventListener('click', handleDocumentClick);
};
 
const handleDocumentClick = (event) => {
  if (!event.target.closest('.el-popover')) {
    isPopoverVisible.value = false;
  }
};
 
onMounted(() => {
  // No need to call onShowPopover here, as v-model:visible will handle it
});
 
onBeforeUnmount(() => {
  // Make sure to remove the event listener
  document.removeEventListener('click', handleDocumentClick);
});
</script>

在这个例子中，我们使用了Vue 3的<script setup>语法简化了代码。isPopoverVisible是一个响应式引用，用于控制el-popover的显示状态。我们通过修改isPopoverVisible的值来手动控制弹出层的显示和隐藏。

当弹出层显示时（即触发@show事件时），我们添加一个事件监听器来监听全局的点击事件。如果点击事件的目标不是弹出层本身及其子元素，我们就关闭弹出层。这是通过event.target.closest方法来判断的，它会检查点击事件的目标是否是弹出层或其子孙元素之一。当弹出层隐藏时（即触发@hide事件时），我们移除之前添加的点击事件监听器。

请确保在组件销毁前移除事件监听器，以避免潜在的内存泄漏。这就是通过onBeforeUnmount生命周期钩子来实现的。