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

useAssets

tải tài sản

useAutofocus

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

useBus

đăng ký và hủy đăng ký xe buýt

usePager

Hiển thị máy nhắn tin của bảng điều khiển của chế độ xem.

usePosition

định vị một phần tử liên quan đến mục tiêu

useSpellCheck

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êu

  • eventName (string()) -- tên của sự kiện mà chúng tôi muốn nghe

  • callback (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ả

popper

sợi dây

đây là tham chiếu useRef cho phần tử sẽ được định vị. Mặc định là "popper".

thùng chứa

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 <html/>)

lề

con số

đã thêm lề giữa các phần tử popper và tham chiếu (mặc định: 0)

vị trí

Hướng[-Biến thể]

vị trí mong muốn. Nó là một chuỗi bao gồm một Hướng và một Biến thể được phân tách bằng ký tự dấu gạch ngang. Hướng có thể là: trên, dưới, phải, trái. Biến thể có thể là: bắt đầu, giữa, kết thúc, phù hợp. Biến thể có thể được bỏ qua (biến thể mặc định là giữa). Biến thể fit có nghĩa là popper sẽ có chiều rộng hoặc chiều cao giống hệt nhau, tùy thuộc vào hướng đã chọn. Ví dụ về các vị trí hợp lệ: right-end, top-start, left-middle, left, bottom-fit. (vị trí mặc định: dưới)

onPositioned

(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. PositioningSolution là một đối tượng có loại sau: { hướng: Hướng, biến thể: Biến thể, trên cùng: số, trái: số }.

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

tên giới thiệu

sợi dây

đây là tham chiếu useRef cho phần tử sẽ được bật kiểm tra chính tả.