当前位置：首页 > VUE

vue实现popper

2026-01-13 03:25:45VUE

Vue 实现 Popper 的方法

在 Vue 中实现 Popper（弹窗定位工具）通常可以使用第三方库如 @popperjs/core 或封装好的 Vue 组件库（如 vue-popper）。以下是两种常见的实现方式：

使用 `@popperjs/core` 原生库

安装 @popperjs/core：

npm install @popperjs/core

在 Vue 组件中直接调用 Popper：

vue实现popper

<template>
  <div>
    <button ref="button">Trigger</button>
    <div ref="tooltip" class="tooltip">Tooltip content</div>
  </div>
</template>

<script>
import { createPopper } from '@popperjs/core';

export default {
  mounted() {
    const button = this.$refs.button;
    const tooltip = this.$refs.tooltip;
    createPopper(button, tooltip, {
      placement: 'right',
    });
  },
};
</script>

<style>
.tooltip {
  background: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  display: none;
}

button:hover + .tooltip {
  display: block;
}
</style>

使用 `vue-popper` 封装库

安装 vue-popper：

npm install vue-popper

在组件中调用：

vue实现popper

<template>
  <popper
    trigger="click"
    :options="{
      placement: 'bottom',
    }"
  >
    <button>Click me</button>
    <div slot="content">Popper content</div>
  </popper>
</template>

<script>
import Popper from 'vue-popper';

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

自定义 Popper 动画

如果需要动画效果，可以结合 CSS 或 Vue 过渡（Transition）：

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <div v-if="show" class="popper">Popper with animation</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
};
</script>

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

.popper {
  background: #eee;
  padding: 10px;
  border-radius: 4px;
}
</style>

动态调整 Popper 位置

通过监听窗口变化或内容更新，可以动态调整 Popper 位置：

<template>
  <div>
    <button ref="button">Dynamic Position</button>
    <div ref="tooltip" class="tooltip">Adjusting content</div>
  </div>
</template>

<script>
import { createPopper } from '@popperjs/core';

export default {
  mounted() {
    const button = this.$refs.button;
    const tooltip = this.$refs.tooltip;
    const popperInstance = createPopper(button, tooltip, {
      placement: 'auto',
    });

    // 动态更新位置
    window.addEventListener('resize', () => {
      popperInstance.update();
    });
  },
};
</script>