popper.js 生命周期——迹忆客-ag捕鱼王app官网

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设置为自定义修饰符的阶段。