vue2 的 antd popover点击空白区域不关闭

在Vue 2中，Ant Design（antd）的Popover组件默认行为是在鼠标点击其容器外部或者按下Esc键时关闭。如果你想要实现在点击空白区域时不关闭Popover，你需要自定义事件处理逻辑。

一种常见的做法是给Popover添加一个`@clickoutside`事件监听器，并阻止该事件的默认行为，除非用户点击的是Popover内部的内容。这通常通过Vue的`v-on`指令以及`event.stopPropagation()`方法来实现。下面是一个简单的例子：

<template>
  <a-popover ref="popover" placement="bottom">
    <div @click.stop="">内容</div>
    <button v-on:click="$refs.popover.toggle()">显示</button>
  </a-popover>
</template>

<script>
export default {
  methods: {
    handleClickOutside(e) {
      if (!this.$refs.popover || !this.$refs.popover.$el.contains(e.target)) {
        this.$refs.popover.close();
      }
    },
  },
  mounted() {
    document.addEventListener('mousedown', this.handleClickOutside);
    // 或者使用其他适合的全局事件监听器
  },
  beforeDestroy() {
    document.removeEventListener('mousedown', this.handleClickOutside);
  },
}
</script>

在这个例子中，当文档上的任何地方被点击，`handleClickOutside`方法会被触发，只有当点击点不在Popover的DOM元素内时，才会关闭它。记得在`beforeDestroy`钩子里移除这个事件监听器，防止内存泄漏。