vue3点击按钮弹出popover

在 Vue 3 中，你可以使用 Popover 组件来实现点击按钮弹出气泡弹出框的效果。具体步骤如下：

1. 在需要使用气泡弹出框的页面中引入 Popover 组件：

import { defineComponent } from 'vue';
import { Popover } from 'ant-design-vue';

2. 在页面中添加一个按钮，并绑定点击事件：

<template>
  <a-button type="primary" @click="showPopover">打开气泡弹出框</a-button>
</template>

3. 在 setup 函数中声明一个变量，用于控制 Popover 是否显示：

setup() {
  const show = ref(false);
  
  const showPopover = () => {
    show.value = true;
  }
  
  return {
    show,
    showPopover
  }
}

4. 在 Popover 组件中添加需要显示的内容，例如一个文本框：

<template>
  <a-popover v-model:visible="show">
    <a-input placeholder="请输入内容" />
  </a-popover>
</template>

这样，当用户点击按钮时，就会弹出一个气泡弹出框，其中包含一个文本框供用户输入内容。需要注意的是，这里使用了 Ant Design Vue 组件库中的 Popover 组件，你需要先安装并引入这个组件库才能正常使用 Popover 组件。