antd vue popover 仅在单击按钮时关闭

在Ant Design Vue库中，Popover组件是一个弹出层，通常用于显示额外的信息或操作。如果你想让Popover在用户点击外部区域或者单击关闭按钮时自动关闭，可以利用`onVisibleChange` prop来控制其可见状态。

首先，在你的Vue组件中引入`Popover`组件，并设置`onVisibleChange`属性：

<template>
  <a-popover :placement="placement" v-model="showPopover" on-visible-change="handleVisibleChange">
    <template slot="title">标题</template>
    <template slot="content">内容</template>
    <button @click="$refs.popover.hide()">关闭</button>
  </a-popover>
</template>

<script>
export default {
  data() {
    return {
      showPopover: false,
      placement: 'bottom', // 可选值有'top', 'right', 'bottom', 'left'
    };
  },
  methods: {
    handleVisibleChange(show) {
      if (!show) { // 当visible变为false时，即关闭时
        this.$refs.popover && this.$refs.popover.hide(); // 调用Popover的hide方法关闭它
      }
    },
  },
};
</script>

在这个例子中，当`showPopover`变为`false`时，`handleVisibleChange`方法会被触发，进而隐藏Popover。同时，如果直接点击外部区域，由于设置了事件穿透（`@clickoutside`），也会触发这个隐藏操作。