当前位置：首页 > VUE

vue实现popper

2026-02-10 10:46:09VUE

Vue 实现 Popper 的方法

在 Vue 中实现 Popper 功能，通常需要借助第三方库如 @popperjs/core 或 popper.js，并结合 Vue 的指令或组件封装。以下是几种常见的实现方式。

使用 `@popperjs/core` 直接集成

安装 @popperjs/core：

npm install @popperjs/core

在 Vue 组件中直接调用 Popper：

import { createPopper } from '@popperjs/core';

export default {
  mounted() {
    const button = this.$refs.button;
    const tooltip = this.$refs.tooltip;

    createPopper(button, tooltip, {
      placement: 'right',
    });
  },
};

模板部分：

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

使用 `vue-popperjs` 封装组件

安装 vue-popperjs：

npm install vue-popperjs

在 Vue 中注册组件：

import Popper from 'vue-popperjs';
import 'vue-popperjs/dist/vue-popper.css';

export default {
  components: {
    Popper,
  },
};

模板中使用：

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

使用 `floating-vue`（推荐）

floating-vue 是专为 Vue 3 设计的 Popper 替代方案，支持 Vue 2 和 Vue 3。

安装：

npm install floating-vue

在 Vue 中注册插件：

import FloatingVue from 'floating-vue';
import 'floating-vue/dist/style.css';

Vue.use(FloatingVue);

模板中使用指令：

<template>
  <button v-tooltip="'Tooltip content'">Hover me</button>
</template>

自定义 Vue 指令封装 Popper

如果需要更灵活的封装，可以自定义 Vue 指令：

import { createPopper } from '@popperjs/core';

export default {
  directives: {
    popper: {
      inserted(el, binding) {
        const tooltip = document.createElement('div');
        tooltip.className = 'tooltip';
        tooltip.textContent = binding.value;
        document.body.appendChild(tooltip);

        createPopper(el, tooltip, {
          placement: binding.arg || 'top',
        });

        el._popper = {
          tooltip,
          destroy: () => tooltip.remove(),
        };
      },
      unbind(el) {
        if (el._popper) {
          el._popper.destroy();
        }
      },
    },
  },
};

模板中使用：

<template>
  <button v-popper:right="'Tooltip content'">Button</button>
</template>

样式与动画

为 Popper 添加样式和动画：

.tooltip {
  background: #333;
  color: white;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}