在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>
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐