vue3实现popever

Vue 3 实现 Popover 组件

在 Vue 3 中实现 Popover 组件可以通过多种方式完成，以下是一种常见的实现方法，结合了 Vue 3 的 Composition API 和 Teleport 功能。

基本结构

创建一个 Popover 组件，包含触发元素和内容区域。使用 v-model 控制显示状态。

<template>
  <div class="popover-container">
    <div class="trigger" @click="togglePopover">
      <slot name="trigger"></slot>
    </div>
    <Teleport to="body">
      <div v-if="isOpen" class="popover-content" :style="contentStyle">
        <slot name="content"></slot>
      </div>
    </Teleport>
  </div>
</template>

逻辑实现

使用 Vue 3 的 ref 和 computed 管理状态和计算位置。

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  placement: {
    type: String,
    default: 'bottom',
    validator: (value) => ['top', 'bottom', 'left', 'right'].includes(value),
  },
});

const isOpen = ref(false);
const triggerRef = ref(null);

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

const contentStyle = computed(() => {
  if (!triggerRef.value || !isOpen.value) return {};
  const rect = triggerRef.value.getBoundingClientRect();
  const styles = { position: 'fixed' };

  switch (props.placement) {
    case 'top':
      styles.bottom = `${window.innerHeight - rect.top}px`;
      styles.left = `${rect.left}px`;
      break;
    case 'bottom':
      styles.top = `${rect.bottom}px`;
      styles.left = `${rect.left}px`;
      break;
    case 'left':
      styles.top = `${rect.top}px`;
      styles.right = `${window.innerWidth - rect.left}px`;
      break;
    case 'right':
      styles.top = `${rect.top}px`;
      styles.left = `${rect.right}px`;
      break;
  }

  return styles;
});
</script>

样式设计

为 Popover 添加基本样式，确保内容区域浮动在触发元素旁边。

<style scoped>
.popover-container {
  position: relative;
  display: inline-block;
}

.popover-content {
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 8px;
  z-index: 1000;
}
</style>

使用示例

在父组件中使用 Popover，通过插槽定义触发元素和内容。

<template>
  <Popover placement="bottom">
    <template #trigger>
      <button>Click me</button>
    </template>
    <template #content>
      <div>Popover content goes here</div>
    </template>
  </Popover>
</template>

进阶功能

为增强 Popover 的交互性，可以添加以下功能：

• 点击外部关闭：通过监听文档点击事件，判断点击目标是否在 Popover 外部。
• 动画效果：使用 Vue 的 Transition 组件添加淡入淡出效果。
• 动态位置调整：根据视口空间自动调整位置，避免超出屏幕。

// 点击外部关闭
const handleClickOutside = (event) => {
  if (isOpen.value && !event.target.closest('.popover-container')) {
    isOpen.value = false;
  }
};

onMounted(() => {
  document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
});

通过以上步骤，可以实现一个功能完整且灵活的 Popover 组件。