通过 Vue Vueuse库的useElementVisibility 判断元素是否可见

通过 Vue Vueuse库的useElementVisibility 判断元素是否可见,返回响应式对象。

Vueuse useElementSize Vue 获取html的元素大小

Vue 通过 Vueuse 库的 useElementSize 可以获取html元素的大小,并返回响应式对象,比jquery 获取HTML element更方便和优雅。

Vueuse useElementBounding Vue 获取元素的边界

Vue 类库 Vueuse 的 useElementBounding 可以获取html元素的边界,并返回响应式对象,该对象返回了宽、高以及位置信息。

VueUse useDropZone 创建一个文件拖拽区

VueUse useDropZone 创建一个文件拖拽区,用户可以在电脑选中文件(可以选中多个)并拖动到该区域,你可以获取到这个文件的对象。

VueUse useDraggable 拖动元素

VueUse useDraggable 可以拖动元素到任何位置,并返回对应的坐标。

VueUse useDocumentVisibility Vue 检测当前网页是否可见

VueUse useDocumentVisibility 使 Vue 可以检测当前网页是否可见,和小程序的onShow事件功能类似,当你点击浏览器上其他选项卡时为不可见,在点击当前浏览器选卡时显示为可见。

Vue 通过 VueUse 的 useActiveElement 获取当前焦点元素

Vue 通过 VueUse 的 useActiveElement 获取当前焦点元素,支持Vue各版本,它是document.activeElement的响应式封装。

VueUse Elements Dom元素

VueUse Elements Dom元素操作相关集合,比如元素焦点、大小、缩放、滚动等相关Vue操作函数。

VueUse useThrottledRefHistory 限流快照

VueUse useThrottledRefHistory 可以自动跟踪响应式对象的更改历史,还提供撤消和重做功能,useThrottledRefHistory具有限流功能。

VueUse useStorageAsync

VueUse useStorageAsync 使用方法和 useStorage 一样,但是它支持异步。

Vueuse useStorage 响应式存储

Vueuse useStorage 封装了原生的LocalStorage/SessionStorage方法实现响应式存储,我个人不建议用这个方法,可以直接用useLocalStorage和useSessionStorage,他俩用起来更简单。

VueUse useSessionStorage 响应式Session存储

Vueuse useSessionStorage 是对原生js的sessionStorage进行的封装,实现了响应式的Session本地存储,sessionStorage可以把数据存储在浏览器端,当关闭网页时数据会自动清除,而localStorage是永久存储在浏览器中,那么VueUse对这两原生方法做了响应式封装。

VueUse useRefHistory 历史快照

VueUse useRefHistory 可以自动跟踪响应式对象的历史更改,还提供撤消和重做功能。

Vueuse useManualRefHistory 手动提交修改记录

Vueuse useManualRefHistory 和useRefHistory不同需要手动调用commit()保存当前记录,手动跟踪ref的更改历史,还提供撤消和重做功能。

Vueuse useLocalStorage 响应式的本地存储

Vueuse useLocalStorage 是对js的localStorage进行的封装,实现了响应式的本地存储,使用更佳简单。

VueUse useLastChanged 最后一次修改时间

VueUse useLastChanged 可以记录最后一次修改时间,如果你新赋的值和没有变化,是不会记录时间的,比如原有的值等于123,再次赋值123,不会记录这次修改时间。

Vueuse useDebouncedRefHistory 具有防抖功能的历史记录

Vueuse useDebouncedRefHistory 库用于记录 ref 对象值的历史记录,同时支持撤销和重做操作。它与 useRefHistory 类似,但它提供debounce 选项,防止频繁记录历史数据,它具有防抖功能。

VueUse useAsyncState 异步响应式

VueUse useAsyncState ,它会将异步结果包裹在一个响应式的对象中,在执行异步操作时,将对象中的loading属性设置为true,执行完后loading属性设置为false,并将结果更新state或error属性。

VueUse createSharedComposable 组件间共享事件

VueUse createSharedComposable 组件间共享事件,可以解决重复监听事件的问题。

VueUse createInjectionState 组件传值

VueUse createInjectionState 是对Vue3 Provide/Inject的封装实现组件传值,它可把数据穿透组件传给子组件使用,解决了Provide/Inject 无法追踪数据源的问题。