本文简介
点赞 + 关注 + 收藏 = 学会了
狠话放在前,如果你工作中用到
Vue
,求求你试一下VueUse
吧~
VueUse
是专门为 Vue
打造的工具库,它提供了监听页面元素的各种行为、调用浏览器提供的蓝牙、定位、摄像头、连接游戏手柄等能力,适用于 Vue2
和 Vue3
。
本文挑了几个 VueUse
里 Elements
的功能来玩,使用 Vue3
进行讲解。
安装 VueUse
使用以下命令可以将 VueUse
安装到你项目里。
css
npm i @vueuse/core
安装完,需要使用哪个工具就引入哪个工具。
js
import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()
使用 Elements 模块的提供的工具
监听当前激活的元素 useActiveElement
使用 useActiveElement
可以监听当前激活的元素,比如选中的按钮、点击了输入框,这些操作都可以被监听到。
我稍微简化了一下代码,使用了一个输入框和一个按钮来讲解。
要监听当前激活的元素需要做以下几步:
- 引入
useActiveElement
- 使用
useActiveElement
就这么简单😂
html
<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
查看元素的自定义属性:
js
// 省略部分代码
watch(activeElement, (el) => {
console.log(el.dataset)
})
当了解了 useActiveElement
的用法后,可以去看看官网的例子。
监听页面是否可见 useDocumentVisibility
使用 useDocumentVisibility
可以监听页面是否可见。
它可以监听浏览器最小化、浏览器标签页切换。
比如切换到别的标签页,控制台就会输出 hidden
,切换回来就会输出 visible
。
useDocumentVisibility
的用法很简单,引入 -> 使用
html
<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
的用法很简单,也是 引入 -> 使用
html
<template>
<div>
窗口焦点:{{ focused }}
</div>
</template>
<script setup>
import { useWindowFocus } from '@vueuse/core'
const focused = useWindowFocus()
</script>
监听鼠标是否悬停在指定元素外 useMouseInElement
useMouseInElement
其实是监听鼠标和指定元素的参数变化。
因为前面讲解的内容偏向于页面可见、聚焦方面,而 useMouseInElement
可以监听鼠标有没有悬停在指定元素上。看上去和前面的章节有一点点联系吧,所以这节就起了这个标题。
首先需要引入 useMouseInElement
,在使用时传入目标元素。
上代码
html
<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
除了可以监听鼠标是否悬停在元素上,还提供了其他功能。打开官方文档 可以看到支持的功能。
属性都比较简单,可以自己输出所有属性看看哪些用得上的。
监听元素位置、监听元素大小这些功能也很常用。
js
// 省略部分代码
const mouseInElementObj = useMouseInElement(target)
console.log(mouseInElementObj)
监听元素可见性 useElementVisibility
使用 useElementVisibility
可以监听元素的可见性。
它能监听元素:
- CSS的
display
是否为none
; - 元素是否在当前窗口(有滚动条的情况下,元素可能会出现在窗口外)。
html
<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
的对象给我们。
html
<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
进行监听。
累了,其他的方法以后再介绍吧~
点赞 + 关注 + 收藏 = 学会了