钩子¶

Owl hooks 是一种代码分解方式，即使代码依赖于某些组件的生命周期。Owl 提供的大多数 hooks 都与组件生命周期有关，但其中一些（如 useComponent）提供了一种构建特定 hooks 的方式。

通过使用这些钩子，可以构建许多定制化的钩子，以帮助解决特定问题或简化一些常见任务。本页其余部分记录了 Odoo Web 框架提供的钩子列表。

名称	简短描述
useAssets	加载资源
useAutofocus	自动聚焦由 autofocus 引用的元素
useBus	订阅和取消订阅总线
usePager	显示视图控制面板的分页器。
usePosition	相对于目标定位元素
useSpellCheck	在输入框或文本区域获得焦点时激活拼写检查

useAssets¶

位置¶

@web/core/assets

描述¶

有关更多详细信息，请参阅关于懒加载资源的部分。

useAutofocus¶

位置¶

@web/core/utils/hooks

描述¶

当引用 t-ref=”autofocus” 的元素出现在当前组件的 DOM 中且之前未显示时，立即聚焦该元素。

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()¶

返回: 元素引用。

useBus¶

位置¶

@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()) – 监听器回调

usePager¶

位置¶

@web/search/pager_hook

描述¶

显示视图控制面板的分页器。此钩子正确设置 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()) – 返回分页器属性的函数。

usePosition¶

位置¶

@web/core/position_hook

描述¶

帮助将一个 HTMLElement（ popper ）相对于另一个 HTMLElement（ reference ）进行定位。此钩子确保在窗口调整大小或滚动时更新定位。

import { usePosition } from "@web/core/position_hook";
import { Component, xml } from "@odoo/owl";

class MyPopover extends Component {
  static template = xml`
    <div t-ref="popper">
      I am positioned through a wonderful hook!
    </div>
  `;

  setup() {
    // Here, the reference is the target props, which is an HTMLElement
    usePosition(this.props.target);
  }
}

重要

您应该使用 t-ref directive 来指示您的 popper 元素。

API¶

usePosition(reference[, options])¶

参数

reference (HTMLElement or ()=>HTMLElement()) – 要从中定位的目标 HTMLElement
options (Options()) – 定位选项（见下表）

选项	类型	描述
`popper`	字符串	这是一个 useRef reference，用于将被定位的元素。默认值为 `"popper"`。
`container`	HTMLElement	期望 popper 不会溢出的容器。如果发生溢出，则会尝试其他 popper 位置，直到找到不溢出的位置。（默认值：`<html/>` 节点）
`margin`	数字	popper 和参考元素之间的额外边距（默认值：`0` ）
`position`	方向[-变体]	所需位置。它是由一个 `Direction` 和一个 `Variant` 组成的字符串，两者之间用短横线分隔。`Direction` 可以是：`top` 、 `bottom` 、 `right` 、 `left` 。`Variant` 可以是：`start` 、 `middle` 、 `end` 、 `fit` 。变体可以省略（默认变体为 `middle` ）。`fit` 变体表示 popper 的宽度或高度将与所选方向完全相同。有效位置示例：`right-end` 、 `top-start` 、 `left-middle` 、 `left` 、 `bottom-fit` 。（默认位置：`bottom` ）
`onPositioned`	(el: HTMLElement, position: PositioningSolution) => void	每次发生定位时都会调用的回调函数（例如，在组件挂载/修补、文档滚动、窗口调整大小时…）。可用于根据当前位置动态设置样式。`PositioningSolution` 是具有以下类型的对象：`{ direction: Direction, variant: Variant, top: number, left: number }` 。

Example

import { Component, xml, useRef } from "@odoo/owl";
import { usePosition } from "@web/core/position_hook";

class DropMenu extends Component {
  static template = xml`
    <button t-ref="toggler">Toggle Menu</button>
    <div t-ref="menu">
      <t t-slot="default">
        This is the menu default content.
      </t>
    </div>
  `;

  setup() {
    const toggler = 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";
        },
      },
    );
  }
}

useSpellCheck¶

位置¶

@web/core/utils/hooks

描述¶

通过当前组件中的 t-ref="spellcheck" 在输入框或文本区域获得焦点时激活拼写检查状态。该状态在失去焦点时会被移除，同时红色轮廓也会消失，从而提高内容的可读性。

该钩子也可以用于任何带有 contenteditable 属性的 HTML 元素。要完全禁用可能由钩子启用的元素的拼写检查，请在该元素上显式地将 spellcheck 属性设置为 false 。

Example

在以下示例中，拼写检查将在第一个输入框、文本区域以及具有 contenteditable="true" 的 div 上启用。

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()) – 拼写检查选项（见下表）

选项	类型	描述
`refName`	字符串	这是一个 useRef reference，用于将启用拼写检查的元素。

在 GitHub 上编辑