鉤子?

Owl hooks 是一種將代碼因素化的方式，即使它依賴于某些組件的生命周期。Owl提供的大多數鉤子與組件的生命周期相關，但其中一些(例如 useComponent)提供了構建特定鉤子的方法。

使用這些鉤子，可以構建許多定制的鉤子，幫助解決特定問題或使某些常見任務更容易。本頁的其余部分記錄了Odoo Web框架提供的鉤子列表。

名稱	簡短描述
useAssets	加載資源
useAutofocus	自動聚焦到由 autofocus 引用的元素
useBus	訂閱和取消訂閱總線
usePager	顯示視圖控制面板的分頁器。
usePosition	將元素相對于目標定位

使用資產?

位置?

@web/core/assets

描述?

查看惰性加載資源部分獲取更多細節。

使用自動對焦?

位置?

@web/core/utils/hooks

描述?

在當前組件中，只要出現在DOM中并且之前沒有顯示過，就聚焦由t-ref=”autofocus”引用的元素。

import { useAutofocus } from "@web/core/utils/hooks";

class Comp {
  setup() {
    this.inputRef = useAutofocus();
  }
  static template = "Comp";
}

<t t-name="Comp" owl="1">
  <input t-ref="autofocus" type="text"/>
</t>

API?

useAutofocus()?

返回: 元素引用。

使用總線?

位置?

@web/core/utils/hooks

描述?

向總線添加和清除事件監聽器。此鉤子確保在組件卸載時正確清除監聽器。

import { useBus } from "@web/core/utils/hooks";

class MyComponent {
  setup() {
    useBus(this.env.bus, "some-event", event => {
      console.log(event);
    });
  }
}

API?

useBus(bus, eventName, callback)?

參數

bus (EventBus()) – 目標事件總線
eventName (string()) – 我們想要監聽的事件的名稱
callback (function()) – 監聽器回調函數

使用分頁器?

位置?

@web/search/pager_hook

描述?

顯示視圖控制面板的 Pager 。此鉤子正確設置 env.config ，以提供分頁器的屬性。

import { usePager } from "@web/search/pager_hook";

class CustomView {
  setup() {
    const state = owl.hooks.useState({
      offset: 0,
      limit: 80,
      total: 50,
    });
    usePager(() => {
      return {
        offset: this.state.offset,
        limit: this.state.limit,
        total: this.state.total,
        onUpdate: (newState) => {
          Object.assign(this.state, newState);
        },
      };
    });
  }
}

API?

usePager(getPagerProps)?

參數

getPagerProps (function()) – 返回分頁器屬性的函數。

使用位置?

位置?

@web/core/position_hook

描述?

幫助將一個 HTMLElement（ popper ）相對于另一個 HTMLElement（ reference ）進行定位。此鉤子確保在窗口調整大小/滾動時更新定位。

import { usePosition } from "@web/core/position_hook";

class MyPopover extends owl.Component {
  setup() {
    // Here, the reference is the target props, which is an HTMLElement
    usePosition(this.props.target);
  }
}
MyPopover.template = owl.tags.xml`
  <div t-ref="popper">
    I am positioned through a wonderful hook!
  </div>
`;

重要

您應該使用 t-ref 指令指定您的 popper 元素。

API?

usePosition(reference[, options])?

參數

reference (HTMLElement or ()=>HTMLElement()) – 要定位的目標 HTMLElement
options (Options()) – 定位選項（見下表）

選項	類型	描述
`popper`	字符串	這是一個 useRef 引用用于將要定位的元素。默認為 `"popper"` 。
`container`	HTMLElement	期望彈出框不會溢出的容器。如果發生溢出，將嘗試其他彈出框位置，直到找到不會溢出的位置為止。（默認值： `<html/>` 節點）
`margin`	數字	在彈出框和參考元素之間添加邊距（默認值： `0` ）
`position`	方向[-變體]	所需的位置。它是一個字符串，由一個 `Direction` 和一個 `Variant` 組成，用破折號分隔。 `Direction` 可以是： `top` 、 `bottom` 、 `right` 、 `left` 。 `Variant` 可以是： `start` 、 `middle` 、 `end` 。變體可以省略（默認變體為 `middle` ）。有效位置的示例： `right-end` 、 `top-start` 、 `left-middle` 、 `left` 。（默認位置： `bottom` ）
`onPositioned`	(el: HTMLElement，position: PositioningSolution) => void	每次發生定位時都會調用的回調函數（例如在組件掛載/修補、文檔滾動、窗口調整大小等情況下）?？捎糜诟鶕斍拔恢眠M行動態樣式設置。 `PositioningSolution` 是一個具有以下類型的對象： `{ direction: Direction, variant: Variant, top: number, left: number }` 。

Example

import { usePosition } from "@web/core/position_hook";

class DropMenu extends owl.Component {
  setup() {
    const toggler = owl.useRef("toggler");
    usePosition(
      () => toggler.el,
      {
        popper: "menu",
        position: "right-start",
        onPositioned: (el, { direction, variant }) => {
          el.classList.add(`dm-${direction}`); // -> "dm-top" "dm-right" "dm-bottom" "dm-left"
          el.style.backgroundColor = variant === "middle" ? "red" : "blue";
        },
      },
    );
  }
}
DropMenu.template = owl.tags.xml`
  <button t-ref="toggler">Toggle Menu</button>
  <div t-ref="menu">
    <t t-slot="default">
      This is the menu default content.
    </t>
  </div>
`;

Edit on GitHub