钩子¶

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	将元素相对于目标定位
useSpellCheck	activate spellcheck on focus for input or textarea

使用资产¶

位置¶

@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">
  <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`	方向[-变体]	the desired position. It is a string composed of one `Direction` and one `Variant` separated by a dash character. `Direction` could be: `top`, `bottom`, `right`, `left`. `Variant` could be: `start`, `middle`, `end`, `fit`. The variant can be omitted (default variant is `middle`). The `fit` variant means that the popper would have the exact same width or height, depending on the chosen direction. Examples of valid positions: `right-end`, `top-start`, `left-middle`, `left`, `bottom-fit`. (default position: `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>
`;

useSpellCheck¶

位置¶

@web/core/utils/hooks

描述¶

Activate the spellcheck state to an input or textarea on focus by a t-ref="spellcheck" in the current component. This state is then removed on blur, as well as the red outline, which improves readability of the content.

The hook can also be used on any HTML element with the contenteditable attribute. To disable spellcheck completely on elements that might be enabled by the hook, set explicitly the spellcheck attribute as false on the element.

Example

In the following example, the spellcheck will be enabled on the first input, the textarea and the div with contenteditable="true".

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

class Comp {
  setup() {
    this.simpleRef = useSpellCheck();
    this.customRef = useSpellCheck({ refName: "custom" });
    this.nodeRef = useSpellCheck({ refName: "container" });
  }
  static template = "Comp";
}

<t t-name="Comp">
  <input t-ref="spellcheck" type="text"/>
  <textarea t-ref="custom"/>
  <div t-ref="container">
    <input type="text" spellcheck="false"/>
    <div contenteditable="true"/>
  </div>
</t>

API¶

useSpellCheck([options])¶

参数

options (Options()) – the spellcheck options (see table below)

选项	类型	描述
`refName`	字符串	this is a useRef reference for the element that will be spellcheck enabled.

Edit on GitHub