挂钩¶

Owl hooks 是一种分解代码的方法，即使它取决于某些组件生命周期。 Owl 提供的大多数钩子都与组件的生命周期相关，但其中一些（例如 useComponent）提供了构建特定钩子的方法。

使用这些钩子，可以构建许多自定义钩子来帮助解决特定问题，或者使一些常见任务变得更容易。本页的其余部分记录了 Odoo Web 框架提供的钩子列表。

姓名	简短描述
useAssets	加载资产
useAutofocus	自动聚焦自动聚焦引用的元素
useBus	订阅和取消订阅总线
usePager	显示视图控制面板的寻呼机。
usePosition	相对于目标定位元素
useSpellCheck	激活输入或文本区域焦点上的拼写检查

使用资产¶

地点¶

@web/core/assets

描述¶

有关更多详细信息，请参阅 lazy loading assets 部分。

使用自动对焦¶

地点¶

@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>

应用程序编程接口¶

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);
    });
  }
}

应用程序编程接口¶

useBus(bus, eventName, callback)¶

参数

bus (EventBus()) – 目标事件总线
eventName (string()) – 我们想听的事件的名称
callback (function()) – 监听器回调

使用寻呼机¶

地点¶

@web/search/pager_hook

描述¶

显示视图控制面板的:ref:Pager <frontend/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);
        },
      };
    });
  }
}

应用程序编程接口¶

usePager(getPagerProps)¶

参数

getPagerProps (function()) – 返回寻呼机道具的函数。

使用位置¶

地点¶

@web/core/position_hook

描述¶

帮助相对于另一个 HTMLElement（reference）定位 HTMLElement（popper）。该挂钩可确保在调整窗口大小/滚动时更新定位。

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 元素。

应用程序编程接口¶

usePosition(reference[, options])¶

参数

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

选项	类型	描述
`popper`	细绳	这是将要定位的元素的 useRef reference。默认值为 `"popper"`。
`container`	HTML元素	预计弹出器不会溢出的容器。如果发生溢出，则尝试其他弹出位置，直到找到未溢出的位置。（默认值：`<html/>` 节点）
`margin`	数字	在弹出器和参考元素之间添加了边距（默认值：`0`）
`position`	方向[-变体]	所需的位置。它是由一个 `Direction` 和一个 `Variant` 组成的字符串，并用破折号字符分隔。 `Direction` 可以是：`top`、`bottom`、`right`、`left`。 `Variant` 可能是：`start`、`middle`、`end`、`fit`。该变体可以省略（默认变体是 `middle`）。 `fit` 变体意味着弹出器将具有完全相同的宽度或高度，具体取决于所选方向。有效位置示例：`right-end`、`top-start`、`left-middle`、`left`、`bottom-fit`。（默认位置：`bottom`）
`onPositioned`	(el: HTMLElement, 位置: 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";
        },
      },
    );
  }
}

使用拼写检查¶

地点¶

@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>

应用程序编程接口¶

useSpellCheck([options])¶

参数

options (Options()) – 拼写检查选项（见下表）

选项	类型	描述
`refName`	细绳	这是将启用拼写检查的元素的 useRef reference。