钩子

Owl 钩子 <https://github.com/odoo/owl/blob/master/doc/reference/hooks.md>`_ 是一种用于代码复用的方式,即使它依赖于某些组件的生命周期。Owl 提供的大多数钩子都与组件的生命周期相关,但其中一些钩子(例如 useComponent)提供了一种构建特定钩子的方法。

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

名称

简要描述

使用资源

加载资源

使用 autofocus

自动聚焦由 autofocus 引用的元素

useBus

订阅和取消订阅到一个总线

使用分页器

显示视图控制面板的分页器。

usePosition

将元素相对于目标进行定位

使用拼写检查

在输入框或文本区域获得焦点时启用拼写检查

使用资源

库位

@web/core/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()
返回

该元素的引用。

使用 Bus

库位

@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/搜索/分页器钩子

描述

显示视图控制面板的 分页器。此钩子会正确设置 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(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 元素。

接口

usePosition(reference[, options])
参数
  • reference (HTMLElement or ()=>HTMLElement()) – 要定位的目标 HTMLElement

  • options (Options()) – 定位选项(参见下表)

选项

类型

描述

弹出框

字符串

这是一个 useRef 引用,用于定位的元素。默认值为 "popper"

容器

HTMLElement

弹出框不应溢出的容器。如果发生溢出,会尝试其他弹出框位置,直到找到一个不溢出的位置。(默认: <html/> 节点)

边距

数字

添加弹出框和引用元素之间的边距(默认:0

位置

方向[-变体]

所需的位置。它是一个由一个 Direction 和一个 Variant 通过连字符分隔的字符串。Direction 可以是:topbottomrightleftVariant 可以是:startmiddleendfit。变体可以省略(默认变体是 middle)。fit 变体表示弹出框将具有与所选方向相同的宽度或高度。有效位置的示例:right-endtop-startleft-middleleftbottom-fit。(默认位置: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>
`;

使用拼写检查

库位

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

选项

类型

描述

引用名称

字符串

这是一项 useRef 引用,用于将启用拼写检查的元素。