如何使用 PopperJS 确定 Translate Y 定位

Question

我正在创建一个下拉控件作为可重用的 Web 组件，我决定使用 PopperJS 来处理下拉项的定位。

我正在试验子项目，我创建了一个小检查以确定 placement:

placement: this.parentElement.nodeName == "MY-ELEMENT" // Check if parent is a menu
  ? "right"
  : "bottom"

我有created a StackBlitz.

子项目向右打开没问题，但如果您 F12 并检查项目，它们会被平移 -60 像素，因此项目位于中心而不是底部向下。

如果我选择放置 right-end，那么项目的位置太靠下了，我想要的是将 Y 翻译成 0 而不是 -60。

如何确定项目应该正确放置？

Answer 1

StackBlitz 工作正常吗？

我认为你可以使用偏移修饰符来添加一些侧滑：

createPopper(reference, popper, {
  placement: this.parentElement.nodeName == "MY-ELEMENT"
            ? "right"
            : "bottom",
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: ({ placement, reference, popper }) => {
          if (placement === 'right') {
            return [60, 0];
          } else {
            return [];
          }
        },
      },
    },
  ],
});

可能是60而不是-60，不确定我是否得到了你想要的。您可以在此处查看用法：https://popper.js.org/docs/v2/modifiers/offset/

如何使用 PopperJS 确定 Translate Y 定位

How to determine Translate Y positioning with PopperJS

javascript

position

popper.js