VueUse Elements
Dom元素操作相关集合,比如元素焦点、大小、缩放、滚动等相关Vue操作函数。
Vue 通过 VueUse 的 useActiveElement 获取当前焦点元素,支持Vue各版本,它是document.activeElement的响应式封装。
点击访问>>VueUse useDocumentVisibility 使 Vue 可以检测当前网页是否可见,和小程序的onShow事件功能类似,当你点击浏览器上其他选项卡时为不可见,在点击当前浏览器选卡时显示为可见。
点击访问>>VueUse useDraggable 可以拖动元素到任何位置,并返回对应的坐标。
点击访问>>VueUse useDropZone 创建一个文件拖拽区,用户可以在电脑选中文件(可以选中多个)并拖动到该区域,你可以获取到这个文件的对象。
点击访问>>Vue 类库 Vueuse 的 useElementBounding 可以获取html元素的边界,并返回响应式对象,该对象返回了宽、高以及位置信息。
点击访问>>Vue 通过 Vueuse 库的 useElementSize 可以获取html元素的大小,并返回响应式对象,比jquery 获取HTML element更方便和优雅。
点击访问>>通过 Vue Vueuse库的useElementVisibility 判断元素是否可见,返回响应式对象。
点击访问>>Vueuse useIntersectionObserver 检测元素是否可见,与useElementVisibility不同的是你可停止检测行为。
点击访问>>VueUse useMouseInElement 鼠标hover事件 类似 onMouseover 事件但是更强大,它会返回是否在某元素里面、鼠标位置、元素位置、宽高等信息。
点击访问>>通过 Vue 的 Vueuse 库的useMutationObserver 监视 DOM 变动,比如节点增减、属性杨思琦变动变动都会触发MutationObserver事件。
点击访问>>Vue 通过 useParentElement 获取指定元素的父元素,如果不传入指定的元素默认为当前组件的元素。
点击访问>>VueUse useResizeObserver 监控元素大小的变化
点击访问>>Vue useWindowFocus 获取窗口是否是焦点状态,比如你切换浏览器的选项卡,那么你的网页将失去焦点。
点击访问>>Vue useWindowScroll 获取窗口滚动条位置,如果你想获取某个元素的滚动条位置,请使用useScroll
点击访问>>VueUse useWindowSize 获取窗口大小,返回响应式对象。
点击访问>>