当前位置：首页 > VUE

vue实现Pop

2026-03-07 12:24:22VUE

Vue 实现 Popover 组件

Popover（弹出框）是一种常见的 UI 组件，用于在用户交互时显示额外信息。以下是基于 Vue 3 的实现方法。

vue实现Pop

基础实现

创建 Popover.vue 文件，定义基础结构和样式：

vue实现Pop

<template>
  <div class="popover-container">
    <div class="popover-trigger" @click="toggle">
      <slot name="trigger"></slot>
    </div>
    <div v-if="isOpen" class="popover-content">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const isOpen = ref(false)
    const toggle = () => {
      isOpen.value = !isOpen.value
    }
    return { isOpen, toggle }
  }
}
</script>

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

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

添加定位控制

扩展组件以支持不同位置的弹出：

<template>
  <div class="popover-container">
    <div class="popover-trigger" @click="toggle">
      <slot name="trigger"></slot>
    </div>
    <div 
      v-if="isOpen" 
      class="popover-content"
      :class="`popover-${position}`"
    >
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  props: {
    position: {
      type: String,
      default: 'bottom',
      validator: (value) => ['top', 'bottom', 'left', 'right'].includes(value)
    }
  },
  setup() {
    const isOpen = ref(false)
    const toggle = () => {
      isOpen.value = !isOpen.value
    }
    return { isOpen, toggle }
  }
}
</script>

<style>
/* 原有样式基础上添加 */
.popover-top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
}

.popover-bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
}

.popover-left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 8px;
}

.popover-right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
}
</style>

添加点击外部关闭功能

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

export default {
  props: {
    position: {
      type: String,
      default: 'bottom'
    },
    closeOnClickOutside: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    const isOpen = ref(false)
    const popoverRef = ref(null)

    const toggle = () => {
      isOpen.value = !isOpen.value
    }

    const handleClickOutside = (event) => {
      if (popoverRef.value && !popoverRef.value.contains(event.target)) {
        isOpen.value = false
      }
    }

    onMounted(() => {
      if (props.closeOnClickOutside) {
        document.addEventListener('click', handleClickOutside)
      }
    })

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

    return { isOpen, toggle, popoverRef }
  }
}
</script>

使用方法

<template>
  <Popover position="bottom">
    <template #trigger>
      <button>点击我</button>
    </template>
    <template #content>
      <div>这是弹出内容</div>
    </template>
  </Popover>
</template>

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

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