elementui 如何点击空白处关闭el-popover
elementui 如何点击空白处关闭el-popover
·
在Element UI中,要使 el-popover在点击空白处关闭,可以通过监听全局的点击事件,并在点击空白处时关闭 el-popover。以下是实现这一功能的示例代码:
<template>
<el-popover
ref="popover"
placement="top"
title="标题"
width="200"
trigger="click"
content="这是一段内容,这是一段内容。"
popper-class="custom-popover"
>
<el-button slot="reference">点击打开</el-button>
</el-popover>
</template>
<script>
export default {
mounted() {
// 监听全局点击事件
document.addEventListener('click', this.handleDocumentClick, true);
},
beforeDestroy() {
// 组件销毁前移除监听事件
document.removeEventListener('click', this.handleDocumentClick, true);
},
methods: {
handleDocumentClick(e) {
// 判断点击事件是否发生在el-popover外
const popoverRef = this.$refs.popover;
if (!popoverRef || !popoverRef.$el) return;
if (!popoverRef.$el.contains(e.target) && popoverRef.showPopper) {
popoverRef.showPopper = false;
}
}
}
};
</script>
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)