钩子¶

Owl hooks are a way to factorize code, even if it depends on some component lifecycle. Most hooks provided by Owl are related to the lifecycle of a component, but some of them (such as useComponent) provide a way to build specific hooks.

使用这些钩子，可以构建许多定制的钩子，帮助解决特定问题或使某些常见任务更容易。本页的其余部分记录了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。这个 hooks 正确地设置 env.config 来提供给 pager 的 props。

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 reference 用于定位的元素。默认值是 `"popper"`。
`container`	HTMLElement	期望弹出框不会溢出的容器。如果发生溢出，将尝试其他弹出框位置，直到找到不会溢出的位置为止。（默认值： `<html/>` 节点）
`margin`	数字	在 popper 和参考元素之间添加边距（默认值： `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	每次发生定位时调用的回调函数（例如在组件挂载/修补、文档滚动、窗口调整大小等情况下）。可用于根据当前位置进行动态样式设置。 `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