vue3 popover

Vue3 中的 Popover 组件是一个弹出式的提示框组件，通常用于鼠标悬停或点击事件上展示更多的信息。Popover 组件在 Vue3 中可以使用 Vite 和 Composition API 来实现。

具体来说，我们可以使用 `defineComponent` API 来定义 Popover 组件，并在 `setup` 函数中使用 `ref` 和 `reactive` 函数来声明响应式变量。然后，我们可以通过 `onMounted` 和 `onUnmounted` 函数来监听组件的挂载和卸载事件，以及使用 `teleport` 函数将弹出框放置在 DOM 树中指定的位置。

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

<template>
  <div>
    <slot></slot>
    <teleport to="body">
      <div v-if="visible" class="popover">
        <slot name="content"></slot>
      </div>
    </teleport>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, onMounted, onUnmounted } from 'vue';

export default defineComponent({
  setup() {
    const popover = reactive({
      visible: false,
      x: 0,
      y: 0
    });

    const popoverRef = ref(null);

    const showPopover = (event) => {
      popover.visible = true;
      popover.x = event.clientX;
      popover.y = event.clientY;
    };

    const hidePopover = () => {
      popover.visible = false;
    };

    onMounted(() => {
      document.addEventListener('mousemove', showPopover);
    });

    onUnmounted(() => {
      document.removeEventListener('mousemove', showPopover);
    });

    return {
      popover,
      popoverRef,
      showPopover,
      hidePopover
    };
  }
});
</script>

<style>
.popover {
  position: absolute;
  left: 0;
  top: 0;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .24), 0 0 6px rgba(0, 0, 0, .12);
}
</style>

在上面的代码中，我们使用了 `teleport` 函数将弹出框放置在 `body` 元素中，这样可以避免出现 z-index 的问题。同时，我们也监听了鼠标移动事件，并通过 `showPopover` 和 `hidePopover` 函数来控制 Popover 组件的显示和隐藏。