讲几个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 可以监听当前激活的元素，比如选中的按钮、点击了输入框，这些操作都可以被监听到。

官网给出的Demo：

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

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

1. 引入 useActiveElement
2. 使用 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 进行监听。

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

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