Vue useWindowScroll 获取窗口滚动条位置,如果你想获取某个元素的滚动条位置,请使用useScroll
Vue useWindowFocus 获取窗口是否是焦点状态,比如你切换浏览器的选项卡,那么你的网页将失去焦点。
VueUse useResizeObserver 监控元素大小的变化
Vue 通过 useParentElement 获取指定元素的父元素,如果不传入指定的元素默认为当前组件的元素。
通过 Vue 的 Vueuse 库的useMutationObserver 监视 DOM 变动,比如节点增减、属性杨思琦变动变动都会触发MutationObserver事件。
VueUse useMouseInElement 鼠标hover事件 类似 onMouseover 事件但是更强大,它会返回是否在某元素里面、鼠标位置、元素位置、宽高等信息。
Vueuse useIntersectionObserver 检测元素是否可见,与useElementVisibility不同的是你可停止检测行为。
通过 Vue Vueuse库的useElementVisibility 判断元素是否可见,返回响应式对象。
Vue 通过 Vueuse 库的 useElementSize 可以获取html元素的大小,并返回响应式对象,比jquery 获取HTML element更方便和优雅。
Vue 类库 Vueuse 的 useElementBounding 可以获取html元素的边界,并返回响应式对象,该对象返回了宽、高以及位置信息。
VueUse useDropZone 创建一个文件拖拽区,用户可以在电脑选中文件(可以选中多个)并拖动到该区域,你可以获取到这个文件的对象。
VueUse useDraggable 可以拖动元素到任何位置,并返回对应的坐标。
VueUse useDocumentVisibility 使 Vue 可以检测当前网页是否可见,和小程序的onShow事件功能类似,当你点击浏览器上其他选项卡时为不可见,在点击当前浏览器选卡时显示为可见。
Vue 通过 VueUse 的 useActiveElement 获取当前焦点元素,支持Vue各版本,它是document.activeElement的响应式封装。
VueUse Elements Dom元素操作相关集合,比如元素焦点、大小、缩放、滚动等相关Vue操作函数。
VueUse useThrottledRefHistory 可以自动跟踪响应式对象的更改历史,还提供撤消和重做功能,useThrottledRefHistory具有限流功能。
VueUse useStorageAsync 使用方法和 useStorage 一样,但是它支持异步。
Vueuse useStorage 封装了原生的LocalStorage/SessionStorage方法实现响应式存储,我个人不建议用这个方法,可以直接用useLocalStorage和useSessionStorage,他俩用起来更简单。
Vueuse useSessionStorage 是对原生js的sessionStorage进行的封装,实现了响应式的Session本地存储,sessionStorage可以把数据存储在浏览器端,当关闭网页时数据会自动清除,而localStorage是永久存储在浏览器中,那么VueUse对这两原生方法做了响应式封装。
VueUse useRefHistory 可以自动跟踪响应式对象的历史更改,还提供撤消和重做功能。