Popper.js 生命周期

Popper 依赖于以精确顺序执行的一组步骤，以提供您期望的功能。一切都从 popper 初始化开始，通过调用 createPopper 来执行。首先，运行所有修改器的效果。 之后，轮到modifiers的主要逻辑。此时，您的 popper 已正确定位，并且它的位置已准备好以不同方式更新。

手动更新

您可以通过运行instance.update()要求 Popper 重新计算工具提示的位置。

此方法将返回一个promise，该promise将使用更新后的状态进行解析，您可以从中选择读取更新后的位置。

const state = await popperInstance.update();

设置新选项

您还可以通过为您的 Popper 实例设置新选项来触发更新。 这在内部将调用 update() 方法。

const state = await popperInstance.setOptions({ placement: 'bottom' });

事件监听器

您还可以让 Popper 在触发某些事件时自动更新位置，要了解更多信息，请访问 Event Listeners Modifier 页面。

与生命周期挂钩

在某些情况下，您可能需要挂钩 Popper 的生命周期以执行一些额外的逻辑。

如果您只需要在 Popper 第一次定位元素后运行回调，您可以在 Popper 选项中定义 onFirstUpdate 属性：

createPopper(referenceElement, popperElement, {
  onFirstUpdate: state => console.log('Popper positioned on', state.placement),
});

相反，如果您希望在每个更新周期上运行一些逻辑，那么最好的方法是定义自己的自定义修饰符。

如果要确保在所有其他修饰符运行后运行逻辑，我们建议将afterWrite设置为自定义修饰符的阶段。