Vue单页应用中Popper.js弹窗无法右置的问题咨询

你踩了一个很容易忽略的小坑——你把Popper核心的applyStyle修饰器给禁用了！这个修饰器的作用就是把Popper计算好的定位样式（比如position、transform这些）自动应用到弹窗元素上，你把它关掉的话，Popper就算算出了正确的右侧定位坐标，也没法把样式写到DOM里，弹窗自然就只能停留在默认的文档流位置（也就是参考元素下方）了。

快速修复方案 #

直接移除modifiers里的applyStyle: {enabled: false}配置就行，默认情况下Popper会自动处理所有定位相关的样式：

mounted() {
  let referenceEl = document.getElementById("ref");
  let popperEl = document.getElementById("pop");
  let popperInstance = new Popper(referenceEl, popperEl, {
    placement: "right"
    // 删掉applyStyle的禁用配置
  });
}

补充：确保基础样式正确 #

虽然Popper会自动设置定位，但你需要给弹窗元素一个最基础的position: absolute（如果你的全局样式没覆盖的话，Popper其实也会自动加，但手动加上更保险），同时可以给弹窗加一些基础样式让它显示正常：

#pop {
  position: absolute;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px 12px;
}

/* 可选：给箭头添加样式，让它显示正常 */
[x-arrow] {
  width: 8px;
  height: 8px;
  background: #fff;
  border-left: 1px solid #e0e0e0;
  border-top: 1px solid #e0e0e0;
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

完整Vue组件示例 #

如果你需要参考完整的代码结构，这里是一个可以直接运行的示例：

<template>
  <div class="popper-demo">
    <div id="ref" aria-describedby="pop">ref</div>
    <div id="pop" role="tooltip">
      <div x-arrow></div>
      pop
    </div>
  </div>
</template>

<script>
import Popper from 'popper.js';

export default {
  mounted() {
    const referenceEl = document.getElementById('ref');
    const popperEl = document.getElementById('pop');
    // 初始化Popper，设置placement为right
    new Popper(referenceEl, popperEl, {
      placement: 'right'
    });
  }
};
</script>

<style scoped>
.popper-demo {
  padding: 20px;
}

#ref {
  padding: 8px 12px;
  border: 1px solid #eee;
  display: inline-block;
  cursor: pointer;
}

#pop {
  position: absolute;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px 12px;
}

[x-arrow] {
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-left: 1px solid #e0e0e0;
  border-top: 1px solid #e0e0e0;
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}
</style>

进阶：如果确实需要自定义样式控制 #

如果你是因为想自己接管部分样式才禁用applyStyle，那不要直接关掉整个修饰器，而是通过fn选项来自定义样式应用逻辑，比如只让Popper控制定位，其他样式自己写：

new Popper(referenceEl, popperEl, {
  placement: "right",
  modifiers: {
    applyStyle: {
      enabled: true,
      fn: (data) => {
        // 只应用定位相关的核心样式
        data.popper.style.position = data.styles.position;
        data.popper.style.transform = data.styles.transform;
        data.popper.style.left = data.styles.left;
        data.popper.style.top = data.styles.top;
        return data;
      }
    }
  }
});

内容的提问来源于stack exchange，提问作者Eden WebStudio