钩子¶
Owl 钩子 <https://github.com/odoo/owl/blob/master/doc/reference/hooks.md>`_ 是一种用于代码复用的方式,即使它依赖于某些组件的生命周期。Owl 提供的大多数钩子都与组件的生命周期相关,但其中一些钩子(例如 useComponent)提供了一种构建特定钩子的方法。
使用这些钩子,可以构建许多自定义钩子,以帮助解决特定问题或简化一些常见任务。本页其余部分记录了 Odoo 网络框架提供的钩子列表。
名称 |
简要描述 |
---|---|
加载资源 |
|
自动聚焦由 autofocus 引用的元素 |
|
订阅和取消订阅到一个总线 |
|
显示视图控制面板的分页器。 |
|
将元素相对于目标进行定位 |
|
在输入框或文本区域获得焦点时启用拼写检查 |
使用资源¶
库位¶
@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()
) – 要定位的目标 HTMLElementoptions (
Options()
) – 定位选项(参见下表)
选项 |
类型 |
描述 |
---|---|---|
|
字符串 |
这是一个 useRef 引用,用于定位的元素。默认值为 |
|
HTMLElement |
弹出框不应溢出的容器。如果发生溢出,会尝试其他弹出框位置,直到找到一个不溢出的位置。(默认: |
|
数字 |
添加弹出框和引用元素之间的边距(默认: |
|
方向[-变体] |
所需的位置。它是一个由一个 |
|
(el: HTMLElement, position: PositioningSolution) => void |
一个在每次定位发生时都会被调用的回调函数(例如在组件挂载/修补、文档滚动、窗口调整大小等情况下)。可以用于根据当前位置进行动态样式设置。 |
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 引用,用于将启用拼写检查的元素。 |