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>