一、useActiveElement
作用:获取当前激活的element
用法如下:
<template>
<div class="">
<a-input v-for="i in 6"
type="text"
:data-id="i"
:placeholder="`${i}`"
:class="{'activeClass':i==key}"/>
当前激活的元素是:{{key}}
</div>
</template>
<script setup>
import { computed } from 'vue'
import { useActiveElement } from '@vueuse/core'
const activeElement = useActiveElement();
console.log('activeElement',activeElement)
const key = computed(() => activeElement.value?.dataset?.id || 'null')
watch(activeElement,(el)=>{
console.log('focus changed to',el)//el是当前激活的dom元素
})
</script>
二、useDocumentVisibility
响应性地跟踪文档的可视性状态
用法如下:
import {ref,watch,computed } from 'vue'
import { useActiveElement,useDocumentVisibility} from '@vueuse/core'
import {useTimeoutFn} from '@vueuse/shared' //vueuse提供的定时器功能
const activeElement = useActiveElement();
const key = computed(() => activeElement.value?.dataset?.id || 'null')
watch(activeElement,(el)=>{
console.log('focus changed to',el)
})
//useDocumentVisibility的用法
const startMessage = "最小化页面或者切换tab然后返回"
const message = ref(startMessage)//使用ref 将此常量包装成一个响应式数据message
const visibility = useDocumentVisibility()//`获取页面的可见性状态，并将其赋值给visibility
const timeout = useTimeoutFn(()=>{
//创建一个定时器`timeout `,每隔3000ms 执行一次回调函数，将`message `的值恢复为startMessage
message.value = startMessage
},3000)
watch(visibility,(current,previous)=>{
//监听`visibility `的变化，当页面从最小化或切换tab 回到前台,修改`message `的值为"欢迎回来"
if(current === 'visible' && previous=== 'hidden'){
message.value = "欢迎回来"
timeout.start();//并开始定时器`timeout
}
})
三、useDocumentVisibility
使元素可拖拽
用法见vueuse.org/core/useDra…
组件式用法:
如下实现了一个元素的拖拽，并将拖拽之后的数据保存在sessionStorage中,使得页面刷新之后拖拽位置还在,实现了元素位置的持久化
import {UseDraggable} from '@vueuse/component'
<UseDraggable :initialValue="{ x: 10, y: 10 }"
v-slot="{ x, y }"
storage-key="vueuse-draggable" //将key为vueuse的数据存储在sessionStorage中,key可以任意
storage-type="session"
style="position:fixed;">
Drag me! I am at {{x}}, {{y}}
</UseDraggable>
四、useDropZone
用于创建拖放区域并提供相关的功能和状态。
主要用于处理拖放操作，并可以用于实现拖放文件或其他元素的功能
如下所示实现一个文件的拖拽功能,并在拖拽区显示文件名称等信息
<script setup lang="ts">
import { ref } from 'vue'
import { useDropZone } from '@vueuse/core'
const filesData = ref<{ name: string; size: number; type: string; lastModified: number }[]>([])
function onDrop(files: File[] | null) {
filesData.value = []
if (files) {
filesData.value = files.map(file => ({
name: file.name,
size: file.size,
type: file.type,
lastModified: file.lastModified,
}))
}
}
const dropZoneRef = ref<HTMLElement>()
const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
</script>
<template>
<div class="flex">
<div class="w-full h-auto relative">
<p>Drop files into dropZone</p>
<img src="/favicon.ico" alt="Drop me">
<div ref="dropZoneRef" class="flex flex-col w-full min-h-200px h-auto bg-gray-400/10 justify-center items-center mt-6">
<div> isOverDropZone: <BooleanDisplay :value="isOverDropZone" /></div>
<div class="flex flex-wrap justify-center items-center">
<div v-for="(file, index) in filesData" :key="index" class="w-200px bg-black-200/10 ma-2 pa-6">
<p>Name: {{ file.name }}</p>
<p>Size: {{ file.size }}</p>
<p>Type: {{ file.type }}</p>
<p>Last modified: {{ file.lastModified }}</p>
</div>
</div>
</div>
</div>
</div>
</template>
五、useIntersectionObserver
检测目标元素的可见性
如下所示实现检测目标元素hello world在滚动父div的滚动条时,hello world的可见性的变化
效果参考:vueuse.org/core/useInt…
<template>
<a-checkbox @change="stop()">Enable</a-checkbox>
<div style="width:300px;height:300px; border:2px dashed #ccc; overflow-y:scroll;margin-top:30px;">
<div ref="target" style="margin:0 2rem 400px;">
<h1>Hello world!</h1>
</div>
</div>
<p>element {{targetIsVisible?'inside':'outside'}}the viewPort</p > const target = ref(null);
</template>
<script>
import {useIntersectionObserver} from '@vueuse/core'
const target = ref(null)
const targetIsVisible = ref(false);
//回调函数接收一个数组参数和一个观察器元素,解构取得其中isIntersecting属性，并将其赋值给targetIsVisible
//将返回的对象解构赋值给stop,stop包含了一个用于停止观察的函数，可以在需要停止观察时使用
const {stop} = useIntersectionObserver(target,([{isIntersecting}],observerElement)=>{
targetIsVisible.value = isIntersecting
})
</script>
