vueuse Elements相关的Api和用法

这里介绍一下vueuse的Elemnets相关的Api和具体用法

一、Element相关

useActiveElement

响应式 document.activeElement

import { useActiveElement } from '@vueuse/core'
import { watch } from 'vue'

const activeElement = useActiveElement()

watch(activeElement, (el) => {
  // 元素聚焦时打印
  console.log('focus changed to', el)
})

useDocumentVisibility

响应式跟踪 document.visibilityState

import { useDocumentVisibility } from '@vueuse/core'
import { watch } from 'vue'

const visibility = useDocumentVisibility()
watch(visibility, (current, previous) => {
   // 当切换浏览器标签和最小化窗口切换的时候能捕捉到
   console.log(current, previous)
})

useElementBounding

让HTML元素的bounding box 响应式

import { useElementBounding } from '@vueuse/core'

const el = ref(null) // template中对标元素
const { x, y, top, right, bottom, left, width, height } = useElementBounding(el)

useElementSize

元素尺寸大小响应式. ResizeObserver MDN

import { useElementSize } from '@vueuse/core'

const el = ref(null) // template中对标元素
const { width, height } = useElementSize(el)

// template中：
 <textarea ref="el" style="resize: both"></textarea>
 Height: {{ height }} Width: {{ width }}

useElementVisibility

跟踪元素在视口中的可见性

import { useElementVisibility } from '@vueuse/core'

const el = ref(null)
const targetIsVisible = useElementVisibility(el);

useMouseInElement

响应式获取鼠标相对于元素的位置

import { useMouseInElement } from '@vueuse/core'

const el = ref(null)
const { x, y, isOutside } = useMouseInElement(el)

二、Drag相关

useDraggable

使元素可拖拽

// template
  <div ref="el" class="box" :style="style" style="position: fixed;cursor: move;">
    Drag me! I am at {{x}}, {{y}}
  </div>
  
  import { useDraggable } from '@vueuse/core'
  
  const { x, y, style } = useDraggable(el, {
  initialValue: { x: 40, y: 40 },
})

useDropZone

创建一个可拖拽的区域，当外面的拖到该区域时，返回true

import { useDropZone } from '@vueuse/core'

const dropZoneRef = ref<HTMLElement>()

const onDrop = (_files: File[] | null) => {
  // called when files are dropped on zone
  console.log('回调')
}
const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)

// tempalte
  <div ref="dropZoneRef" style="width: 200px; height: 200px; background-color: aquamarine">
    {{ isOverDropZone }} 拓拽一个本地文件进来
  </div>

三、Observer相关

useIntersectionObserver

响应式监听目标元素的可见性，它跟useElementVisibility的区别就是它提供了一个stop方法，可以停止监听

import { useIntersectionObserver } from '@vueuse/core'

const targetIsVisible = ref(false)
// 调用stop方法后targetIsVisible将不会再变化
const { stop } = useIntersectionObserver(el, ([{ isIntersecting }], _observerElement) => {
  targetIsVisible.value = isIntersecting
})

useMutationObserver

监听元素Dom的变化

import { useMutationObserver } from '@vueuse/core'

useMutationObserver(
  el,
  (mutations) => {
    console.log(mutations)
    if (mutations[0]) {
        messages.value.push(mutations[0].attributeName)
        // 可以看到dom的哪个属性变了
        console.log(messages.value)
    }
  },
  {
    attributes: true,
    childList: true, // 如果需要观察子节点则设置成true
  }
)

useResizeObserver

监听元素大小的变化

import { useResizeObserver } from '@vueuse/core'

useResizeObserver(el, (entries) => {
  const entry = entries[0]
  const { width, height } = entry.contentRect
  console.log(width, height)
})

useWindowFocus

获取窗口聚焦状态

import { useWindowFocus } from '@vueuse/core'

const focused = useWindowFocus()

useWindowScroll

响应式获取窗口的滚动位置

import { useWindowScroll } from '@vueuse/core'

const { x, y } = useWindowScroll()

useWindowSize

响应式获取窗口的大小

import { useWindowSize } from '@vueuse/core'

const { width, height } = useWindowSize()