popper.js 修饰符（modifiers）——迹忆客-ag捕鱼王app官网

popper 使用可扩展的核心构建，它提供了用于交付库提供的所有功能的基础。

该库提供的所有有用功能都作为 popper 修饰符实现。 它们是插件或中间件，可以钩入到 popper 的生命周期中，并为 popper 默认提供的定位操作添加额外的逻辑。 它们以某种方式有效地“修改”popper 状态，添加功能，因此称为“修饰符”。

自定义修饰符

我们可以通过在 popper 实例化期间在options.modifiers数组中定义它们来添加由您自定义的修饰符。

示例修饰符

当它在顶部时记录到控制台的修饰符（不是很有用，但演示了每个属性）

const toplogger = {
  name: 'toplogger',
  enabled: true,
  phase: 'main',
  fn({ state }) {
    if (state.placement === 'top') {
      console.log('popper is on the top');
    }
  },
};
createpopper(reference, popper, {
  modifiers: [toplogger],
});

有以下属性的修饰符

type modifier = {|
  // required properties
  name: string,
  enabled: boolean,
  phase: modifierphases,
  fn: (modifierarguments) => ?state,
  // optional properties
  requires?: array,
  requiresifexists?: array,
  effect?: (modifierarguments) => ?() => void,
  options?: {},
  data?: {},
|};
type modifierarguments = {
  state: $shape,
  instance: instance,
  options: $shape,
  name: string,
};

name

这个 name用作标识符，以便可以从库的其他部分引用修饰符。 例如，您可以使用name属性将对象添加到 options.modifier 数组，并且 options 属性填充了一些自定义选项，以覆盖内置修饰符的选项。

createpopper(reference, popper, {
  modifiers: [
    {
      name: 'flip',
      options: {
        fallbackplacements: ['top', 'bottom'],
      },
    },
  ],
});

enabled

如果将enabled设置为 true，则修饰符将在 popper 生命周期内执行，否则将被忽略。

phase

popper 的修饰符生命周期分为 3 个核心阶段：read 、main 和 write 。 这样做是为了优化库，以便它对 dom 的访问被组合在一起，而不是分散在整个生命周期中。

需要从 dom 读取的修饰符应该运行在读取阶段，只执行算法逻辑的修饰符应该在 主要阶段，而写入 dom 的应该在写入阶段。

请注意，popper 在其状态中提供了 dom 测量值的缓存，以修饰符可以读取它们而不是查询 dom，从而优化整体执行时间。这意味着您应该很少需要进入读取阶段。

如果需要，为了进一步细化，还有 2 个其他子阶段：之前和之后。 以下是完整列表：

• beforeread(读前)
• read(读)
• afterread(读后)
• beforemain
• main
• aftermain
• beforewrite(写之前)
• write(写)
• afterwrite(写后)

fn

这是主用于为修饰符提供逻辑的函数。

在某些情况下，您可能希望通过修饰符控制 popper 生命周期——例如，翻转修饰符可以改变放置选项，如果发生这种情况，popper 会被指示再次运行所有修饰符，以便它们可以对更新后的修饰符做出反应 放置值。 修饰符可以通过将state.reset设置为 true 来重置生命周期。

requires

requires指定它所依赖的修饰符列表。 popper 会以正确的顺序执行修饰符，允许依赖修饰符访问被依赖修饰符提供的数据。

例如， offset 依赖于 popperoffsets 数据，因为它会改变其属性。

简而言之，修饰符取决于修饰符数据列表才能工作。

requiresifexists

指定它所依赖的修饰符列表，但前提是这些修饰符确实存在。

比如preventoverflow依赖offset，但前提是offset确实存在，因为offset改变了popperoffsets数据，preventoverflow需要读取和变异。 如果offset不存在，preventoverflow仍将正常工作。

简而言之，修饰符依赖于这个修饰符的行为列表（或来自其他修饰符的依赖数据的突变）来工作。

effect

该函数允许您在运行第一个更新周期之前执行任意代码（效果）。 在函数中执行效果并在必要时返回清理函数：

function effect() {
  // perform side effects
  return () => {
    // cleanup side effects
  };
}

这有用的示例涉及不需要在每次更新时运行的代码，而仅在实例生命周期更改（创建、更新或销毁）时运行：

• eventlisteners 修饰符使用它来添加和删除不属于主修饰符更新周期的窗口/文档事件侦听器。
• 箭头修饰符使用它来将元素添加到 state.elements。 箭头修饰符依赖于 preventoverflow (run after)，但 preventoverflow 依赖于 state.elements.arrow。 由于效果在第一个更新周期之前运行，因此问题已解决。

options

这是一个具有用于配置修饰符的所有属性的对象。

data

这是提供给 state.modifiersdata. 的初始数据，共享给其他要读取或操作的修饰符

常用的popper.js修饰符