当前位置：首页 > VUE

vue实现popper

2026-03-27 20:30:06VUE

Vue 实现 Popper 的方法

Popper 是一个流行的 JavaScript 库，用于创建动态定位的弹出框、工具提示或下拉菜单。在 Vue 中可以通过以下方式实现：

安装依赖

需要安装 @popperjs/core 和 vue-popper 或类似库：

vue实现popper

npm install @popperjs/core
# 或使用封装好的 Vue 版本
npm install vue-popperjs

基本用法

直接使用 @popperjs/core 的示例：

<template>
  <button ref="button">按钮</button>
  <div ref="tooltip">工具提示内容</div>
</template>

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

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

使用 Vue 封装库

对于更 Vue 友好的方式，可以使用 vue-popperjs：

vue实现popper

<template>
  <popper
    trigger="click"
    :options="{
      placement: 'bottom',
      modifiers: { offset: { offset: '0,10px' } }
    }">
    <button>点击我</button>
    <template #content>
      <div>弹出内容</div>
    </template>
  </popper>
</template>

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

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

自定义 Popper 组件

可以创建自定义 Popper 组件实现更灵活的控制：

<template>
  <div>
    <div ref="reference" @click="toggle">
      <slot name="reference"></slot>
    </div>
    <div v-show="visible" ref="popper" class="popper">
      <slot name="content"></slot>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      visible: false,
      popperInstance: null
    };
  },
  methods: {
    toggle() {
      this.visible = !this.visible;
      this.updatePopper();
    },
    updatePopper() {
      if (this.visible) {
        this.popperInstance = createPopper(
          this.$refs.reference,
          this.$refs.popper,
          {
            placement: 'bottom',
            modifiers: [
              {
                name: 'offset',
                options: {
                  offset: [0, 8],
                },
              },
            ],
          }
        );
      } else if (this.popperInstance) {
        this.popperInstance.destroy();
        this.popperInstance = null;
      }
    }
  },
  beforeDestroy() {
    if (this.popperInstance) {
      this.popperInstance.destroy();
    }
  }
};
</script>

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

与 Element UI 等 UI 库集成

如果使用 Element UI，可以直接使用其内置的 Popper 实现：

<template>
  <el-popover
    placement="top"
    title="标题"
    width="200"
    trigger="click"
    content="这是一段内容">
    <el-button slot="reference">点击</el-button>
  </el-popover>
</template>