如何用PopperJS确定平移Y轴定位

Question

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

我正在试验子项，我已经创建了一个小检查来确定placement

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

我有created a StackBlitz。

子项向右打开可以，但如果你F12并检查项，它们被平移-60px，所以项位于中心而不是位于底部向下。

如果我选择placement right-end，那么项目的位置太低了，我想让translate 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/