vueuse常用hooks
编程语言
2023-10-03 09:06:21
阅读次数: 0
vueUse 文档
vue 项目常用 hooks
官方文档
非官方中文文档
Element DOM 元素相关
| API |
描述 |
| useDraggable |
使元素可拖拽 |
| useElementSize |
元素尺寸大小响应式 |
| useMouseInElement |
响应式获取鼠标相对于元素的位置 |
| useResizeObserver |
监听元素内容和边框尺寸的变化 |
| useWindowScroll |
响应式获取窗口的滚动位置 |
| useWindowSize |
响应式获取窗口尺寸 |
浏览器相关
| API |
描述 |
| useBrowserLocation |
响应式获取 Location |
| useCssVar |
操作 css 变量 |
| useEventListener |
事件监听，会在组件注册和销毁时自动注入和销毁 |
| useTitle |
响应式 document title |
| useWebWorker |
简单的 Web Workers 注册和通信 |
| useFullscreen |
切换全屏 |
Sensors 传感器相关
| API |
描述 |
| onClickOutside |
监听元素外部的点击事件，对模态框和下拉菜单很有用。 |
| onKeyStroke |
监听键盘事件 |
| onLongPress |
监听一个元素的长按事件 |
| useElementHover |
响应元素的悬停状态 |
| useFocus |
响应式跟踪或设置 DOM 元素的焦点状态。从外部设置响应值为 true 和 false，将分别触发 focus 和 blur 事件。 |
| useIdle |
跟踪用户是否处于非活动状态。 |
| useMouse |
响应式获取鼠标位置 |
| useMagicKeys |
响应式按下状态，支持组合键。 |
请求相关
| API |
描述 |
| useEventSource |
使用 EventSource 或 Server-Sent-Events 实例会对 HTTP 服务开启一个持久化的连接，以 text/event-stream 格式发送事件。 |
| useFetch |
响应式 Fetch API，提供中止请求、在请求被触发之前拦截请求、在 url 更改时自动重新获取请求以及使用预定义选项创建您自己的 useFetch |
Animation 过渡相关
| API |
描述 |
| useTransition |
值之间的过度（常用于数字动态加载） |
| useTimeout |
在给定时间后更新值。 |
| useIntervalFn |
带控件的 setInterval 包装器 |
| useInterval |
每隔一段时间响应式增加计数 |
| useTimeoutFn |
带控件的 setTimeout 包装器。 |
其他
| API |
描述 |
| useStorage |
将 LocalStorage 和 SessionStorage 中的数据响应式。 |
| useRefHistory |
跟踪对 ref 所做的每一步更改, 并将其存储在数组中, 从而实现撤销和重做功能 |
| useDebounceFn |
防抖 |
| useDebounceFn |
节流 |
转载自blog.csdn.net/Big_YiFeng/article/details/130427369