1.0.2 • Published 11 months ago
hooks-vue3 v1.0.2
📦 Install
by using npm
:
npm install hooks-vue3 --save
by using yarn
:
yarn add hooks-vue3
by using pnpm
:
pnpm install hooks-vue3 --save
📚 Online Docs
🔨 Usage
React Style
useState
— useState 管理状态值.
Async
useAsyncState
— useAsyncState 管理异步状态值.
- Watch
useDebounceWatch
- useDebounceWatch 跟watch类似,可以控制函数在多次触发的防抖。useThrottleWatch
- useThrottleWatch 跟watch类似,可以控制函数在多次触发的节流。useOnceWatch
- useOnceWatch 跟watch类似,只触发一次监听,然后自动停止监听
- Side
useTimeout
— useTimeout 在指定的时间后执行一个函数useRafTimeout
— useRafTimeout 在指定的时间后执行一个函数,基于 requestAnimationFrame 实现useInterval
— useInterval 定时器执行一个函数useRafInterval
— useRafInterval 定时执行一个函数,基于 requestAnimationFrame 实现
State
useBoolean
— useBoolean 管理一个布尔类型的状态值.useToggle
— useToggle 可用于管理布尔值状态,还可以用于管理任何类型的状态的真假值useDebounce
— useDebounce 用于处理防抖值useThrottle
— useThrottle 用于处理节流值useLocalStorage
— useLocalStorage 将状态持久化到 localStorage 本地存储中useSessionStorage
— useSessionStorage 将状态持久化到 sessionStorage 本地存储中useCountDown
- useCountDown 可用于实现倒计时useRafCountDown
- useRafCountDown 可用于实现倒计时,基于 requestAnimationFrame 实现
Elements
useClickOutside
— useClickOutside 监听点击目标元素外部时执行某个回调函数,点击事件也可以自定义,可以是其它的鼠标事件useElementSize
- useElementSize 可以用于获取DOM元素的尺寸信息useTitle
-useLongPress
— useLongPress 用于在长按某个元素时触发回调函数useDocumentVisibility
— useDocumentVisibility 检测当前页面是否处于活动状态(即当前窗口的可见性)useEventListener
— useEventListener 用于封装原生的 addEventListener 方法,使得在函数式组件中添加事件监听器更加方便useHover
— useHover 鼠标是否正在悬停目标元素上