Popper.js 计算方式（computeStyles ）

computeStyles修饰符准备将在下一阶段写入DOM的样式，即写入。这包括对偏移进行舍入并决定要使用的属性（例如gpuAcceleration）。

阶段

Phase

Options

type Options = {
  gpuAcceleration: boolean,
  adaptive: boolean,
  roundOffsets: boolean | RoundOffsets, // true by default
};

type RoundOffsets = (
  offsets: $Shape<{ x: number, y: number, centerOffset: number }>
) => {|
  y: number,
  x: number,
|};

gpuAcceleration

这决定了是否使用gpu加速样式来定位popper。

• true: Popper 将在高 PPI 显示上使用 3D 转换，在低 PPI 显示上使用 2D 转换。
• false: Popper 将使用 top/left 属性。

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'computeStyles',
      options: {
        gpuAcceleration: false, // true by default
      },
    },
  ],
});

adaptive

这个默认启用的选项告诉 Popper 使用最合适的 CSS 属性来定位 Popper (可以是顶部和左侧，也可以是底部和右侧)。这允许 popper 内容改变，并减少需要重新计算 popper 位置的可能性。

例如，如果 popper 位于参考元素的左侧，popper将应用** right: 0px** 和 **translate3d(-200px, 0px, 0px)**。这样，如果 popper 的内容发生变化，使其变宽或变窄，则 popper 将保持锚定于其参考元素。

可以通过将选项设置为false来禁用此行为:

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'computeStyles',
      options: {
        adaptive: false, // true by default
      },
    },
  ],
});

roundOffsets

这将决定是否尝试根据设备像素比将偏移四舍五入到最接近的合适像素比。在某些浏览器上，四舍五入可以防止模糊，但可能会导致轻微的定位问题(1px)。

当该选项被设置为 false 时，偏移量将不会被四舍五入，因此您可能会接收到不适合设备亚像素网格的十进制值。 你可以选择将它设置为一个函数来提供你自己的偏移逻辑，例如:

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'computeStyles',
      options: {
        roundOffsets: ({ x, y }) => ({
          x: Math.round(x + 2),
          y: Math.round(y + 2),
        }),
      },
    },
  ],
});

Data

该修饰符当前没有数据。