Hooks¶
Owl hook là một cách để phân tích mã, ngay cả khi nó phụ thuộc vào một số vòng đời thành phần. Hầu hết các hook do Owl cung cấp đều liên quan đến vòng đời của một thành phần, nhưng một số trong số đó (chẳng hạn như `useComponent <https://github.com/odoo/owl/blob/master/doc/reference/hooks.md#usecomComponent> `_) cung cấp cách xây dựng các hook cụ thể.
Sử dụng các hook này, có thể xây dựng nhiều hook tùy chỉnh giúp giải quyết một vấn đề cụ thể hoặc thực hiện một số tác vụ thông thường dễ dàng hơn. Phần còn lại của trang này ghi lại danh sách các hook được cung cấp bởi khung web SoOn.
Tên |
Mô tả ngắn |
---|---|
tải tài sản |
|
tự động lấy nét một phần tử được tham chiếu bằng tính năng tự động lấy nét |
|
đăng ký và hủy đăng ký xe buýt |
|
Hiển thị máy nhắn tin của bảng điều khiển của chế độ xem. |
|
định vị một phần tử liên quan đến mục tiêu |
|
kích hoạt kiểm tra chính tả trên tiêu điểm cho đầu vào hoặc vùng văn bản |
sử dụngAssets¶
Vị trí¶
@web/core/assets
Sự miêu tả¶
Xem phần trên tải nội dung lười biếng để biết thêm chi tiết.
sử dụngTự động lấy nét¶
Vị trí¶
@web/core/utils/hooks
Sự miêu tả¶
Tập trung vào phần tử được tham chiếu bởi t-ref="autofocus" trong thành phần hiện tại ngay khi nó xuất hiện trong DOM và nếu nó không được hiển thị trước đó.
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()¶
- Trả về
tham chiếu phần tử.
sử dụngBus¶
Vị trí¶
@web/core/utils/hooks
Sự miêu tả¶
Thêm và xóa trình xử lý sự kiện vào xe buýt. Móc này đảm bảo rằng người nghe được xóa chính xác khi thành phần được ngắt kết nối.
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)¶
- Đối số
bus (
EventBus()
) -- xe buýt sự kiện mục tiêueventName (
string()
) -- tên của sự kiện mà chúng tôi muốn nghecallback (
function()
) -- cuộc gọi lại của người nghe
sử dụngPager¶
Vị trí¶
@web/search/pager_hook
Sự miêu tả¶
Hiển thị Pager của bảng điều khiển của chế độ xem. Móc này đặt chính xác env.config
để cung cấp đạo cụ cho máy nhắn tin.
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)¶
- Đối số
getPagerProps (
function()
) -- hàm trả về đạo cụ máy nhắn tin.
sử dụngVị trí¶
Vị trí¶
@web/core/position_hook
Sự miêu tả¶
Giúp định vị một HTMLElement (popper
) tương ứng với một HTMLElement khác (reference
). Móc này đảm bảo vị trí được cập nhật khi cửa sổ được thay đổi kích thước/cuộn.
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>
`;
Quan trọng
Bạn nên chỉ ra phần tử popper
của mình bằng lệnh t-ref.
API¶
- usePosition(reference[, options])¶
- Đối số
reference (
HTMLElement or ()=>HTMLElement()
) -- HTMLElement mục tiêu được định vị từoptions (
Options()
) -- các tùy chọn định vị (xem bảng bên dưới)
Lựa chọn |
Kiểu |
Sự miêu tả |
---|---|---|
|
sợi dây |
đây là tham chiếu useRef cho phần tử sẽ được định vị. Mặc định là |
|
Phần tử HTML |
thùng chứa mà từ đó popper dự kiến sẽ không bị tràn. Nếu tràn xảy ra, các vị trí popper khác sẽ được thử cho đến khi tìm thấy vị trí không tràn. (mặc định: nút |
|
con số |
đã thêm lề giữa các phần tử popper và tham chiếu (mặc định: |
|
Hướng[-Biến thể] |
vị trí mong muốn. Nó là một chuỗi bao gồm một |
|
(el: HTMLElement, vị trí: Giải pháp định vị) => void |
một cuộc gọi lại sẽ được gọi mỗi khi xảy ra định vị (ví dụ: trên thành phần được gắn/vá, cuộn tài liệu, thay đổi kích thước cửa sổ...). Có thể được sử dụng tức là để tạo kiểu năng động liên quan đến vị trí hiện tại. |
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>
`;
sử dụngKiểm tra chính tả¶
Vị trí¶
@web/core/utils/hooks
Sự miêu tả¶
Kích hoạt trạng thái kiểm tra chính tả cho đầu vào hoặc vùng văn bản được lấy tiêu điểm bằng t-ref="kiểm tra chính tả"
trong thành phần hiện tại. Trạng thái này sau đó sẽ bị loại bỏ khi bị mờ cũng như đường viền màu đỏ, giúp cải thiện khả năng đọc nội dung.
Hook cũng có thể được sử dụng trên bất kỳ phần tử HTML nào có thuộc tính contenteditable
. Để tắt hoàn toàn tính năng kiểm tra chính tả trên các phần tử có thể được bật bằng hook, hãy đặt rõ ràng thuộc tính kiểm tra chính tả
là false
trên phần tử.
Example
Trong ví dụ sau, tính năng kiểm tra chính tả sẽ được bật ở đầu vào đầu tiên, vùng văn bản và div có 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])¶
- Đối số
options (
Options()
) -- các tùy chọn kiểm tra chính tả (xem bảng bên dưới)
Lựa chọn |
Kiểu |
Sự miêu tả |
---|---|---|
|
sợi dây |
đây là tham chiếu useRef cho phần tử sẽ được bật kiểm tra chính tả. |