讲几个vueuse的Elements模块里的实用方法

本文简介

点赞 + 关注 + 收藏 = 学会了

狠话放在前，如果你工作中用到 Vue ，求求你试一下 VueUse 吧～

VueUse 是专门为 Vue 打造的工具库，它提供了监听页面元素的各种行为、调用浏览器提供的蓝牙、定位、摄像头、连接游戏手柄等能力，适用于 Vue2 和 Vue3。

本文挑了几个 VueUse 里 Elements 的功能来玩，使用 Vue3 进行讲解。

安装 VueUse

使用以下命令可以将 VueUse 安装到你项目里。

npm i @vueuse/core

安装完，需要使用哪个工具就引入哪个工具。

```js import { useMouse } from '@vueuse/core'

const { x, y } = useMouse() ```

使用 Elements 模块的提供的工具

监听当前激活的元素 useActiveElement

使用 useActiveElement 可以监听当前激活的元素，比如选中的按钮、点击了输入框，这些操作都可以被监听到。

官网给出的Demo：

我稍微简化了一下代码，使用了一个输入框和一个按钮来讲解。

要监听当前激活的元素需要做以下几步：

1. 引入 useActiveElement
2. 使用 useActiveElement

就这么简单😂

```html

按钮

```

这里使用了 watch 监听 activeElement 的变化。可以打开控制台看看监听的结果。

在 HTML 元素上添加了 data-myid 属性，这中写法是 HTML5 新增的，data-* 可以自定义元素的属性。

我们可以在js里通过元素的 dataset 查看元素的自定义属性：

js // 省略部分代码 watch(activeElement, (el) => { console.log(el.dataset) })

当了解了 useActiveElement 的用法后，可以去看看官网的例子。

监听页面是否可见 useDocumentVisibility

使用 useDocumentVisibility 可以监听页面是否可见。

它可以监听浏览器最小化、浏览器标签页切换。

比如切换到别的标签页，控制台就会输出 hidden，切换回来就会输出 visible。

useDocumentVisibility 的用法很简单，引入 -> 使用

```html

打开控制台查看吧：{{ visibility }}

```

我使用 watch 监听 visibility 的变化。你可以根据 visibility 的值去实现你的功能。

在 JS 里的 document 翻译成“页面”或许不太正确，叫“文档对象”比较恰当。但使用“文档对象”来讲解觉得怪怪的。大家能知道我想表达的内容就好～

监听页面是否聚焦 useWindowFocus

使用 useWindowFocus 可以监听页面是否聚焦。

和前面提到的 useDocumentVisibility 不同，useDocumentVisibility 是监听页面是否在屏幕上展示，就算切换了窗口，只要浏览器有一丁点位置在屏幕上展示的话，useDocumentVisibility 都会返回 visible。

而 useWindowFocus 的能力可以粗暴的理解为 useDocumentVisibility 升级版。

useWindowFocus 可以监听当前焦点是否在页面上。

比如，当我鼠标点击到红色区域(浏览器页面区域)时，useWindowFocus 会返回 true 。

如果点击其他区域(比如蓝色区域或者点击桌面)，useWindowFocus 会返回 false 。

useWindowFocus 的用法很简单，也是 引入 -> 使用

```html

窗口焦点：{{ focused }}

```

监听鼠标是否悬停在指定元素外 useMouseInElement

useMouseInElement 其实是监听鼠标和指定元素的参数变化。

因为前面讲解的内容偏向于页面可见、聚焦方面，而 useMouseInElement 可以监听鼠标有没有悬停在指定元素上。看上去和前面的章节有一点点联系吧，所以这节就起了这个标题。

首先需要引入 useMouseInElement ，在使用时传入目标元素。

上代码

```html

雷猴

<div>在目标元素外：{{ isOutside }}</div>

```

useMouseInElement 除了可以监听鼠标是否悬停在元素上，还提供了其他功能。打开官方文档 可以看到支持的功能。

属性都比较简单，可以自己输出所有属性看看哪些用得上的。

监听元素位置、监听元素大小这些功能也很常用。

```js // 省略部分代码

const mouseInElementObj = useMouseInElement(target)

console.log(mouseInElementObj) ```

监听元素可见性 useElementVisibility

使用 useElementVisibility 可以监听元素的可见性。

它能监听元素：

• CSS的 display 是否为 none；
• 元素是否在当前窗口(有滚动条的情况下，元素可能会出现在窗口外)。

```html

雷猴

<button
  @click="toggle"
>toggle</button>

<!-- 占位元素，让页面产生滚动条 -->
<div
  style="height: 1000px;"
></div>

<!-- 在页面显示目标元素状态 -->
<div
  style="position: fixed; bottom: 0; right: 0"
>
  target是否可见：{{ targetIsVisible }}
</div>

```

需要注意：

• targetIsVisible 无法监听 v-if。
• 使用 visibility: hidden; 、opacity: 0; 这些样式也无法监听。

监听元素宽高变化 useElementSize

使用 useElementSize 可以监听指定元素的宽高变化。

只要给 useElementSize 传入要监听的元素对象，它就会返回一个包含 width 和 height 的对象给我们。

```html

Height: {{ height }} Width: {{ width }}

```

在工作中，修改 canvas 容器宽高后通常需要刷新一下 canvas 里内容的尺寸或者位置，此时用 useElementSize 监听元素宽高变化就很方便了。

除了使用 useElementSize 监听元素宽高外，还可以使用前面提到的 useMouseInElement 进行监听。

累了，其他的方法以后再介绍吧～

点赞 + 关注 + 收藏 = 学会了