vue3点击按钮弹出van-popover

你可以使用 vant 组件库中的 van-popover 组件来实现这个功能。首先，你需要在你的 Vue 项目中安装 vant：

npm i vant -S

然后，在你的组件中引入 van-popover 组件：

<template>
  <div>
    <van-button type="primary" @click="showPopover($event)">显示 Popover</van-button>
    <van-popover v-model="show" :actions="actions" :placement="placement" :offset="offset" />
  </div>
</template>

<script>
import { ref } from 'vue';
import { Button, Popover } from 'vant';

export default {
  components: {
    [Button.name]: Button,
    [Popover.name]: Popover,
  },
  setup() {
    const show = ref(false);
    const actions = [
      { name: '选项一', icon: 'success' },
      { name: '选项二', icon: 'plus' },
      { name: '选项三', icon: 'search' },
      { name: '选项四', icon: 'like-o' },
      { name: '选项五', icon: 'edit' },
    ];
    const placement = ref('bottom');
    const offset = ref(0);

    const showPopover = (event) => {
      show.value = true;
      offset.value = [event.target.offsetWidth / 2, 10];
    };

    return {
      show,
      actions,
      placement,
      offset,
      showPopover,
    };
  },
};
</script>

在上面的代码中，我们先引入了 vant 的 Button 和 Popover 组件，然后在 setup 函数中定义了一些变量和方法，包括 show、actions、placement、offset 和 showPopover。其中，show 表示 Popover 是否显示，actions 表示 Popover 中的选项，placement 表示 Popover 的位置，offset 表示 Popover 的偏移量，showPopover 是点击按钮时触发的方法。

在模板中，我们使用了 van-button 组件来显示一个按钮，当该按钮被点击时，会触发 showPopover 方法，显示 Popover 组件。Popover 组件的 v-model 绑定到 show 变量，actions、placement 和 offset 属性分别绑定到 actions、placement 和 offset 变量。

最后，我们在 showPopover 方法中计算了 Popover 的偏移量，使其在按钮正下方显示。你可以根据实际需要修改 placement 和 offset 变量来调整 Popover 的位置和偏移量。