在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生命周期钩子来实现的。