mirror of
https://github.com/youzan/vant.git
synced 2025-10-21 19:24:16 +00:00
47 lines
1.5 KiB
Markdown
47 lines
1.5 KiB
Markdown
# Composables
|
|
|
|
### Intro
|
|
|
|
Vant provide some built-in composition APIs, you can directly use these APIs for development.
|
|
|
|
### Install
|
|
|
|
Although `@vant/use` is already included in Vant's dependencies, it is still recommended to install this package explicitly:
|
|
|
|
```shell
|
|
# with npm
|
|
npm i @vant/use
|
|
|
|
# with yarn
|
|
yarn add @vant/use
|
|
|
|
# with pnpm
|
|
pnpm add @vant/use
|
|
```
|
|
|
|
### Demo
|
|
|
|
```js
|
|
import { useWindowSize } from '@vant/use';
|
|
|
|
const { width, height } = useWindowSize();
|
|
|
|
console.log(width.value); // -> window width
|
|
console.log(height.value); // -> window height
|
|
```
|
|
|
|
### API List
|
|
|
|
| Name | Description |
|
|
| --- | --- |
|
|
| [useClickAway](#/en-US/use-click-away) | Triggers a callback when user clicks outside of the target element |
|
|
| [useCountDown](#/en-US/use-count-down) | Used to manage the countdown |
|
|
| [useCustomFieldValue](#/en-US/use-custom-field-value) | Used to custom Field value |
|
|
| [useEventListener](#/en-US/use-event-listener) | Used to attach event |
|
|
| [usePageVisibility](#/en-US/use-page-visibility) | Get the visible state of the page |
|
|
| [useRect](#/en-US/use-rect) | Get the size of an element and its position relative to the viewport |
|
|
| [useRelation](#/en-US/use-relation) | Establish the association relationship between parent and child components |
|
|
| [useScrollParent](#/en-US/use-scroll-parent) | Get the closest parent element that is scrollable |
|
|
| [useToggle](#/en-US/use-toggle) | Used to switch between `true` and `false` |
|
|
| [useWindowSize](#/en-US/use-window-size) | Get the viewport width and height of the browser window |
|