Vant4 介紹

2023-02-16 17:57 更新

介紹

Vant 底層依賴了 ?@vant/use? 包,其中內(nèi)置了一系列的組合式 API。對(duì)于使用了 Vant 的項(xiàng)目,可以復(fù)用這些 API 進(jìn)行開發(fā)。

安裝

雖然 Vant 的依賴中已經(jīng)包含了 ?@vant/use?,但我們?nèi)匀煌扑]顯式地安裝它:

# with npm
npm i @vant/use

# with yarn
yarn add @vant/use

# with pnpm
pnpm add @vant/use

示例

下面是一個(gè) Vant 組合式 API 的用法示例,我們從 ?@vant/use? 這個(gè)包中引入 ?useWindowSize? 方法,然后進(jìn)行調(diào)用,即可獲取到當(dāng)前 Window 的寬度和高度。

import { useWindowSize } from '@vant/use';

const { width, height } = useWindowSize();

console.log(width.value); // -> 窗口寬度
console.log(height.value); // -> 窗口高度

API 列表

下面是 Vant 對(duì)外提供的所有組合式 API,點(diǎn)擊名稱可以查看詳細(xì)介紹:

名稱 描述
useClickAway 監(jiān)聽點(diǎn)擊元素外部的事件
useCountDown 提供倒計(jì)時(shí)管理能力
useCustomFieldValue 自定義表單組件中的表單項(xiàng)
useEventListener 方便地進(jìn)行事件綁定
usePageVisibility 獲取頁(yè)面的可見狀態(tài)
useRect 獲取元素的大小及其相對(duì)于視口的位置
useRelation 建立父子組件之間的關(guān)聯(lián)關(guān)系
useScrollParent 獲取元素最近的可滾動(dòng)父元素
useToggle 用于在布爾值之間進(jìn)行切換
useWindowSize 獲取瀏覽器窗口的視口寬度和高度


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)