当前位置：首页 > VUE

vue实现popper

2026-03-07 10:37:30VUE

Vue 实现 Popper 的方法

使用 Vue 实现 Popper 可以通过集成第三方库 @popperjs/core 或基于其封装的 Vue 组件库（如 vue-popper）。以下是具体实现方式：

直接使用 @popperjs/core

安装依赖：

vue实现popper

npm install @popperjs/core

在 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

在组件中使用：

<template>
  <popper
    trigger="hover"
    :options="{
      placement: 'bottom',
    }"
  >
    <button>Hover me</button>
    <div slot="content">Tooltip content</div>
  </popper>
</template>

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

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

自定义 Popper 组件

封装一个简单的 Vue Popper 组件：

<template>
  <div>
    <div ref="trigger" @mouseenter="show" @mouseleave="hide">
      <slot name="trigger"></slot>
    </div>
    <div
      ref="popper"
      v-show="isVisible"
      class="popper-content"
    >
      <slot name="content"></slot>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      isVisible: false,
      popperInstance: null,
    };
  },
  methods: {
    show() {
      this.isVisible = true;
      this.$nextTick(() => {
        this.popperInstance = createPopper(
          this.$refs.trigger,
          this.$refs.popper,
          {
            placement: 'bottom',
          }
        );
      });
    },
    hide() {
      this.isVisible = false;
      if (this.popperInstance) {
        this.popperInstance.destroy();
      }
    },
  },
  beforeDestroy() {
    if (this.popperInstance) {
      this.popperInstance.destroy();
    }
  },
};
</script>

<style>
.popper-content {
  background: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>