当前位置：首页 > VUE

vue实现Pop

2026-01-13 05:07:01VUE

Vue 实现 Popover 组件

基础实现

使用 Vue 的 v-if 或 v-show 控制弹窗显示，结合 CSS 定位实现基本功能

<template>
  <div class="popover-container">
    <button @click="showPopover = !showPopover">触发按钮</button>
    <div v-if="showPopover" class="popover-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopover: false
    }
  }
}
</script>

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

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

定位控制

通过计算位置实现不同方向的弹出效果

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

methods: {
  getPosition() {
    const triggerRect = this.$el.getBoundingClientRect()
    const popoverRect = this.$refs.popover.getBoundingClientRect()

    switch(this.placement) {
      case 'top':
        return {
          top: triggerRect.top - popoverRect.height - 5 + 'px',
          left: triggerRect.left + triggerRect.width/2 - popoverRect.width/2 + 'px'
        }
      case 'bottom':
        return {
          top: triggerRect.bottom + 5 + 'px',
          left: triggerRect.left + triggerRect.width/2 - popoverRect.width/2 + 'px'
        }
      // 其他方向类似处理
    }
  }
}

事件处理

添加点击外部关闭功能

mounted() {
  document.addEventListener('click', this.handleClickOutside)
},

beforeDestroy() {
  document.removeEventListener('click', this.handleClickOutside)
},

methods: {
  handleClickOutside(e) {
    if (!this.$el.contains(e.target)) {
      this.showPopover = false
    }
  }
}

动画效果

使用 Vue 的 transition 组件添加动画

<transition name="fade">
  <div v-if="showPopover" class="popover-content">
    <slot></slot>
  </div>
</transition>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

完整组件示例

<template>
  <div class="popover-container" ref="container">
    <div @click="toggle">
      <slot name="trigger"></slot>
    </div>

    <transition :name="animation">
      <div 
        v-if="isVisible"
        ref="popover"
        class="popover-content"
        :class="[placement]"
        :style="popoverStyle"
        @click.stop>
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    placement: {
      type: String,
      default: 'bottom'
    },
    trigger: {
      type: String,
      default: 'click'
    },
    animation: {
      type: String,
      default: 'fade'
    }
  },

  data() {
    return {
      isVisible: false
    }
  },

  computed: {
    popoverStyle() {
      if (!this.isVisible) return {}
      return this.calculatePosition()
    }
  },

  methods: {
    toggle() {
      this.isVisible = !this.isVisible
    },

    calculatePosition() {
      const trigger = this.$refs.container
      const popover = this.$refs.popover

      if (!trigger || !popover) return {}

      const triggerRect = trigger.getBoundingClientRect()
      const popoverRect = popover.getBoundingClientRect()

      // 位置计算逻辑
      // ...
    },

    handleClickOutside(e) {
      if (!this.$refs.container.contains(e.target)) {
        this.isVisible = false
      }
    }
  },

  mounted() {
    document.addEventListener('click', this.handleClickOutside)
  },

  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside)
  }
}
</script>