访问给定 DOM 元素的 Popper.js 实例

Question

我正在使用Popper.js在我的页面上放置各种弹出窗口。本质上，我试图在一个小弹出窗口中显示所有文件输入字段，因为正常、丑陋、不可自定义的 HTML 文件输入会破坏页面的布局。

我通过以下方式让它工作得相当好：

1. 使用 JQuery迭代每个元素input[type=file]并查找关联的按钮元素，
2. 使用以下命令为每个文件输入创建一个新的 Popper 实例：

const popper = createPopper(buttonElement, fileInputElement, {
  // Various options including a modifier that adjusts the offset of the popover
})

3. 将“单击”事件处理程序附加到切换弹出窗口可见性的按钮元素。

然而，我在 Popper.js 文档（特别是“教程”）中指出，每当隐藏弹出窗口时我应该销毁每个 Popper 实例，并在显示弹出窗口时重建每个 Popper 实例；这样，Popper.js 就不会不断更新隐藏元素的位置。但由于我不只有一个弹出窗口，因此我并没有真正跟踪 Popper 实例，因此不能只调用.destroy()它们。

一种可能的解决方案是，是否有一种方法可以基于 popover 元素（在本例中为该元素input[type=file]）访问 Popper 实例。有没有办法做到这一点？我有时在互联网上看到过这种想法；例如，有一页似乎表明我可以fileInputElement.popperInstance访问 Popper 实例。不幸的是，这不起作用（也没有起作用fileInputElement._popperInstance）。

有任何想法吗？