popper.js 使用

與自己賽跑的青年發表於2019-01-13
JS

Classes

Popper

Members

  • dataObj

    dataObject是一個包含Popper.js使用的所有資訊的物件。此物件將傳遞給modifiers 以及onCreate和onUpdate回撥。

  • referenceObj

    referenceObject是一個物件，它提供與Popper.js相容的介面，並允許您將其用作真實DOM節點的替代。
    如果沒有要用作參考的DOM節點，可以使用此方法相對於一組座標定位popper。

Objects

  • modifiers

    Modifiers是改變poppers行為的外掛
    Popper.js使用一組9個修飾符來提供庫所需的所有基本功能
    通常你不想覆蓋order，fn和onLoad的props。 所有其他屬性都是可以調整的配置。

Functions

  • getWindow(element) ⇒ window

    獲取與元素關聯的視窗

  • ModifierFn(data, options) ⇒ dataObject

    Modifier 函式，每個修飾符都可以具有分配給其fn屬性的函式。
    每次更新都會呼叫這些函式，這意味著您必須確保它們的效能足以避免效能瓶頸。

Typedefs

  • onUpdate : function
  • onCreate : function

Popper

  • Popper
    • new Popper(referecne, popper, options)
    • .Defaults : Object
      • .placement
      • .positionFixed
      • .eventsEnabled
      • .removeOnDestroy
      • .modifiers
      • .onCreate()
      • .onUpdate()
    • .placements : enum
    • .update()
    • .destroy()
    • .enableEventListeners()
    • .disableEventListeners()
    • .scheduleUpdate()

new Popper(reference, popper, options)

Param Type Description
reference HTMLElement或referenceObject 用於定位popper的引用元素
popper HTMLElement 用作popper的HTML元素
options Object 您的自定義選項可覆蓋Defaults中定義的選項

Popper.Defaults : Object

可以使用Popper.js的options引數覆蓋。

eg:

new Popper(ref, pop, {
  modifiers: {
    preventOverflow: { enabled: false }
  }
})
複製程式碼

  • .Defaults : Object

    • .placement
    • .positionFixed
    • .eventsEnabled
    • .removeOnDestroy
    • .modifiers
    • .onCreate()
    • .onUpdate()
    Defaults.positionFixed

    如果您希望popper將其自定位於“固定”模式，請將此項設定為true

    Defaults.eventsEnabled

    是否啟用事件（resize，scroll）。

    Defaults.removeOnDestroy

    如果要在呼叫destroy方法時自動刪除popper，請將此項設定為true。

    Defaults.onCreate()

    建立popper時呼叫回撥。 預設情況下，它設定為no-op。 使用data.instance訪問Popper.js例項。

    Defaults.onUpdate()

    更新popper時呼叫回撥。 在初始化/建立popper時不會呼叫此回撥，但僅在後續更新時呼叫。

Popper.update()

更新popper的位置，計算新的偏移量並應用新樣式。

Popper.destroy()

摧毀Popper。

Popper.enableEventListeners()

它將新增resize/scorll事件，並在觸發時重新計算popper元素的位置。

Popper.disableEventListeners()

它將刪除resize/scorll事件，並且在觸發時不會重新計算popper element位置。除非您手動呼叫update方法，否則它也不會再觸發回撥。

Popper.scheduleUpdate()

安排更新。它將在下一個可用的UI更新上執行。

dataObject

dataObject是一個包含Popper.js使用的所有資訊的物件。此物件將傳遞給modifiers 中的onCreate和onUpdate回撥函式。

Name Type Descipitoin
data.instance Object Popper.js例項
data.palcement String popper位置
data.originalPlacement String 最初在init上定義的放置
data.flipped Boolean 如果popper已被翻轉修改器翻轉 為真
data.hide Boolean 如果引用元素超出邊界，則為true，這對於知道何時隱藏popper非常有用
data.arrowElement HTMLElement 節點用作箭頭修改器的箭頭
data.styles Object 此處定義的任何CSS屬性都將應用於popper。JavaScript命名法（例如marginBottom）
data.arrowStyles Object 此處定義的任何CSS屬性都將應用於彈出箭頭。JavaScript命名法
data.boundaries Object popper邊界的偏移量
data.offsets Object The measurements of popper, reference and arrow elements
data.offsets.popper Object top，left，width，height值
data.offsets.reference Object top，left，width，height值
data.offsets.arrow Object top和left偏移，只有其中一個與0不同

Modifiers： Object

  • modfiers: Object
    • shift
      • .order
      • .enabled
      • .fn
    • offset
      • .order
      • .enabled
      • .fn
      • .offset
    • preventOverflow
      • .order
      • .enabled
      • .fn
      • .prority
      • .padding
      • .boundaiesElment
    • keepTogether
      • .order
      • enabeld
      • fn
    • arrow
      • .order
      • .enabled
      • .fn
    • flip
      • .order
      • .enabled
      • .fn
      • .behavior
      • .padding
      • .boundariesElement
    • inner
      • .order
      • .enabled
      • .fn
    • hidden
      • order
      • enabled
      • fn
    • computeStyle
      • order
      • enabled
      • fn
      • gpuAccerlaration
      • .x
      • .y
    • applyStyle
      • order
      • enabled
      • fn
      • onload

modifiers:~offset

offset修改可以popper距離主軸的距離

modifiers:~preventOverflow

用於防止popper定位在邊界外
存在一種情況，其中引用本身不在邊界內。我們可以說它已經“逃過了界限” , 或者只是“逃脫”了,我們需要決定popper是否應該

  • 脫離reference並保持“陷入”boundaries，或

  • 如果需要忽略boundary 並“以其reference逃脫”

當escapeWithReference設定為true並且引用完全在其邊界之外時，popper將溢位（或完全離開）邊界，以便保持附加到引用的邊緣。

padding

用於定義邊界和波普爾之間的最小距離的畫素量

boundariesElement

修飾符使用的邊界。可以是scrollParent，window，viewport或者任何DOM元素。

modifiers~keepTogether

用於確保reference及其popper保持彼此靠近而不會在兩者之間留下任何間隙。啟用arrow並且您希望確保它指向其reference元素時特別有用。它只關心第一軸。你仍然可以在popper和它的reference元素之間使用popper

modifiers~arrow

移動arrowElement popper,以確保它位於reference元素和其popper元素之間,讀取arrowElement節點的外部大小以檢測需要多少個連線畫素。

modifiers~flip

用於在彈出視窗的referece元素重疊時翻轉它

behavior

用於更改popper位置的行為。它可以是一個flip，clockwise，counterclockwise或與有效展示位置的列表的陣列（帶有可選的變體）

boundariesElement

將定義popper位置邊界的元素。popper永遠不會被放置在定義的邊界之外（如果keepTogether啟用除外）

modifiers~inner

用於使popper流向參考元素內部的修飾符。預設情況下，禁用此修飾符時，popper將放置在引用元素之外。

modifiers〜computeStyle

計算將應用於popper元素以便正確定位的樣式
請注意，此修飾符不會觸及DOM，它只是準備樣式以便applyStyle修飾符可以應用它。如果需要替換applyStyle自定義實現，則此分離非常有用。

gpuAcceleration

如果為true，則使用CSS 3D轉換來定位popper。否則，它將使用top和left屬性

x

在哪裡錨定X軸（bottom或top）。AKA X偏移原點。如果您的popper應該朝不同方向增長，請更改此項bottom

y

在哪裡錨定Y軸（left或right）。AKA Y偏移原點。如果您的popper應該朝不同方向增長，請更改此項right

modifiers~applyStyle

將計算的樣式應用於popper元素。
所有DOM操作都限於此項。如果您希望將Popper.js整合到框架或檢視庫中並且希望將所有DOM操作委託給它，這將非常有用。
請注意，如果禁用此項，則必須確保popper元素的位置設定為absolute Popper.js才能完成其工作！

相關文章