讲几个vueuse的Elements模块里的实用方法
讲几个vueuse的Elements模块里的实用方法
本文简介
点赞 + 关注 + 收藏 = 学会了
狠话放在前，如果你工作中用到
Vue，求求你试一下VueUse吧～
VueUse 是专门为 Vue 打造的工具库，它提供了监听页面元素的各种行为、调用浏览器提供的蓝牙、定位、摄像头、连接游戏手柄等能力，适用于 Vue2 和 Vue3。
本文挑了几个 VueUse 里 Elements 的功能来玩，使用 Vue3 进行讲解。
安装 VueUse
使用以下命令可以将 VueUse 安装到你项目里。
npm i @vueuse/core安装完，需要使用哪个工具就引入哪个工具。
import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()使用 Elements 模块的提供的工具
监听当前激活的元素 useActiveElement
使用 useActiveElement 可以监听当前激活的元素，比如选中的按钮、点击了输入框，这些操作都可以被监听到。
我稍微简化了一下代码，使用了一个输入框和一个按钮来讲解。
要监听当前激活的元素需要做以下几步：
- 引入
useActiveElement - 使用
useActiveElement
就这么简单😂
<template>
<div>
<input type="text" data-myid="field">
<button data-myid="btn">按钮</button>
</div>
</template>
<script setup>
import { watch } from 'vue'
import { useActiveElement } from '@vueuse/core' // 【1】引入
// 【2】使用
const activeElement = useActiveElement()
watch(activeElement, (el) => {
console.log(el)
})
</script>这里使用了 watch 监听 activeElement 的变化。可以打开控制台看看监听的结果。
在 HTML 元素上添加了 data-myid 属性，这中写法是 HTML5 新增的，data-* 可以自定义元素的属性。
我们可以在js里通过元素的 dataset 查看元素的自定义属性：
// 省略部分代码
watch(activeElement, (el) => {
console.log(el.dataset)
})
当了解了 useActiveElement 的用法后，可以去看看官网的例子。
监听页面是否可见 useDocumentVisibility
使用 useDocumentVisibility 可以监听页面是否可见。
它可以监听浏览器最小化、浏览器标签页切换。
比如切换到别的标签页，控制台就会输出 hidden，切换回来就会输出 visible。
useDocumentVisibility 的用法很简单，引入 -> 使用
<template>
<div>
打开控制台查看吧：{{ visibility }}
</div>
</template>
<script setup>
import { watch } from 'vue'
import { useDocumentVisibility } from '@vueuse/core'
const visibility = useDocumentVisibility()
watch(visibility, (newVal) => {
console.log(newVal)
})
</script>我使用 watch 监听 visibility 的变化。你可以根据 visibility 的值去实现你的功能。
在 JS 里的 document 翻译成“页面”或许不太正确，叫“文档对象”比较恰当。但使用“文档对象”来讲解觉得怪怪的。大家能知道我想表达的内容就好～
监听页面是否聚焦 useWindowFocus
使用 useWindowFocus 可以监听页面是否聚焦。
和前面提到的 useDocumentVisibility 不同，useDocumentVisibility 是监听页面是否在屏幕上展示，就算切换了窗口，只要浏览器有一丁点位置在屏幕上展示的话，useDocumentVisibility 都会返回 visible。
而 useWindowFocus 的能力可以粗暴的理解为 useDocumentVisibility 升级版。
useWindowFocus 可以监听当前焦点是否在页面上。
比如，当我鼠标点击到红色区域（浏览器页面区域）时，useWindowFocus 会返回 true 。
如果点击其他区域（比如蓝色区域或者点击桌面），useWindowFocus 会返回 false 。
useWindowFocus 的用法很简单，也是 引入 -> 使用
<template>
<div>
窗口焦点：{{ focused }}
</div>
</template>
<script setup>
import { useWindowFocus } from '@vueuse/core'
const focused = useWindowFocus()
</script>监听鼠标是否悬停在指定元素外 useMouseInElement
useMouseInElement 其实是监听鼠标和指定元素的参数变化。
因为前面讲解的内容偏向于页面可见、聚焦方面，而 useMouseInElement 可以监听鼠标有没有悬停在指定元素上。看上去和前面的章节有一点点联系吧，所以这节就起了这个标题。
首先需要引入 useMouseInElement ，在使用时传入目标元素。
上代码
<template>
<div>
<div ref="targetRef" class="target">
<h1>雷猴</h1>
</div>
<div>在目标元素外：{{ isOutside }}</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useMouseInElement } from '@vueuse/core'
const targetRef = ref(null)
const { isOutside } = useMouseInElement(targetRef)
</script>
<style scoped>
.target {
background: rgb(131, 133, 134);
width: 300px;
}
</style>useMouseInElement 除了可以监听鼠标是否悬停在元素上，还提供了其他功能。打开官方文档 可以看到支持的功能。
属性都比较简单，可以自己输出所有属性看看哪些用得上的。
监听元素位置、监听元素大小这些功能也很常用。
// 省略部分代码
const mouseInElementObj = useMouseInElement(target)
console.log(mouseInElementObj)监听元素可见性 useElementVisibility
使用 useElementVisibility 可以监听元素的可见性。
它能监听元素：
- CSS的
display是否为none； - 元素是否在当前窗口（有滚动条的情况下，元素可能会出现在窗口外）。
<template>
<div>
<!-- v-if无效，v-show才有效 -->
<div
ref="targetRef"
v-show="showTarget"
>
<h1>雷猴</h1>
</div>
<button
@click="toggle"
>toggle</button>
<!-- 占位元素，让页面产生滚动条 -->
<div
style="height: 1000px;"
></div>
<!-- 在页面显示目标元素状态 -->
<div
style="position: fixed; bottom: 0; right: 0"
>
target是否可见：{{ targetIsVisible }}
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useElementVisibility } from '@vueuse/core'
// 目标元素
const targetRef = ref(null)
// 目标元素的展示状态
const showTarget = ref(true)
// 监听目标元素的展示状态
const targetIsVisible = useElementVisibility(targetRef)
function toggle() {
showTarget.value = !showTarget.value
}
</script>需要注意：
targetIsVisible无法监听v-if。- 使用
visibility: hidden;、opacity: 0;这些样式也无法监听。
监听元素宽高变化 useElementSize
使用 useElementSize 可以监听指定元素的宽高变化。
只要给 useElementSize 传入要监听的元素对象，它就会返回一个包含 width 和 height 的对象给我们。
<template>
<div>
Height: {{ height }}
Width: {{ width }}
<textarea ref="targetRef" />
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useElementSize } from '@vueuse/core'
const targetRef = ref(null)
const { width, height } = useElementSize(targetRef)
</script>在工作中，修改 canvas 容器宽高后通常需要刷新一下 canvas 里内容的尺寸或者位置，此时用 useElementSize 监听元素宽高变化就很方便了。
除了使用 useElementSize 监听元素宽高外，还可以使用前面提到的 useMouseInElement 进行监听。
累了，其他的方法以后再介绍吧～
点赞 + 关注 + 收藏 = 学会了