div写一个vue3的popver

好的，下面是一个简单的 Vue3 Popover 组件的示例代码：

<template>
  <div class="popover-wrapper" @click="togglePopover">
    <slot name="trigger"></slot>
    <div v-if="showPopover" class="popover-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'Popover',
  setup() {
    const showPopover = ref(false);

    const togglePopover = () => {
      showPopover.value = !showPopover.value;
    };

    return {
      showPopover,
      togglePopover,
    };
  },
};
</script>

<style scoped>
.popover-wrapper {
  position: relative;
}

.popover-content {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
</style>

使用方式：

<template>
  <popover>
    <template #trigger>
      <button>Toggle Popover</button>
    </template>
    <div>Popover Content</div>
  </popover>
</template>

<script>
import Popover from './Popover.vue';

export default {
  components: {
    Popover,
  },
};
</script>

注意：这只是一个简单的 Popover 组件示例，实际应用中还需要考虑很多因素，比如内容溢出、定位等问题。