VueUse好用的函数(2)——Sensors类前言 vue3出来也蛮久了，渐渐的成为了主流，团队中也开始使用了起来。

前言

vue3出来也蛮久了，渐渐的成为了主流，团队中也开始使用了起来。 vue3函数式编程理念，和react有了相似之处。

在用react开发时，各种hooks封装使得开发效率大大提升。vue3也有一些类似的hooks库，就比如最近发现的VueUse，订阅数蛮多，不知可用性如何，也没看到中文官网，函数太多了，有的实用性不强，有的不清楚如何使用，在此记录一下我认为可用性强一点的函数吧。

安装

使用npm 或cnpm安装即可。

npm i @vueuse/core

函数总览

函数分为几大类。分别是

Browser
Sensors
Animation
State
Elements
Component
Watch
Network
Utilities
Misc

Sensors 类

onClickOutside 点击元素以外部分

常见于点击弹窗蒙层关闭，点击元素外部触发事件；

<template>
  <div ref="target">
    Hello world
  </div>
  <div>
    Outside element
  </div>
</template>

<script>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'

export default {
  setup() {
    const target = ref(null)

    onClickOutside(target, (event) => console.log('点击外部触发'))

    return { target }
  }
}
</script>

onKeyStroke 键盘事件

可以监听键盘按下指定键的事件。

onKeyStroke(['A','a'], (e) => {
  console.log('Key A pressed on document')
}, { target: document })

onKeyDown - alias for onKeyStroke(key, handler, {eventName: 'keydown'})
onKeyPressed - alias for onKeyStroke(key, handler, {eventName: 'keypress'})
onKeyUp - alias for onKeyStroke(key, handler, {eventName: 'keyup'})

useElementHover 元素是否处于hover状态

在hover时展示不同的文字状态等可以用到

<template>
  <button ref="myHoverableElement">
    {{ isHovered }}
  </button>
</template>

<script setup>
import { useElementHover } from '@vueuse/core'

const myHoverableElement = ref()
const isHovered = useElementHover(myHoverableElement)
</script>

useIdle 是否处于非活动状态

在鼠标键盘不动的情况下，即处于非活动状态。

import { useIdle } from '@vueuse/core'

const { idle, lastActive } = useIdle(5 * 60 * 1000) // 5 min 
// 空闲时间达到5min后，idle.value为true

console.log(idle.value) // true or false

useMouse 鼠标位置

用于获取鼠标x/y坐标和sourceType（mouse|touch)

import { useMouse } from '@vueuse/core'

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

默认情况下启用触摸。要仅检测鼠标变化，请将 touch 设置为 false。

const { x, y } = useMouse({ touch: false })

usePointerSwipe 鼠标拖动

拖动元素时，触发回调事件

const container = ref(null);

const { distanceX, isSwiping } = usePointerSwipe(container, {
    onSwipe() {
       console.log('onswipe');
    },
    onSwipeEnd() {
       console.log('onend');
    },
});
effect(() => {
    console.log(isSwiping, distanceX);
});

useScroll 鼠标滚动信息

<script setup lang="ts">
import { useScroll } from '@vueuse/core'

const el = ref<HTMLElement | null>(null)
const { x, y, isScrolling, arrivedState, directions } = useScroll(el)
</script>

<template>
  <div ref="el"></div>
</template>

useScrollLock 锁定滚动

<script setup lang="ts">
import { useScrollLock } from '@vueuse/core'

const el = ref<HTMLElement | null>(null)
const isLocked = useScrollLock(el)

isLocked.value = true // lock
isLocked.value = false // unlock
</script>

<template>
  <div ref="el"></div>
</template>

useSwipe touch事件滚动

使用同usePointerSwipe，不同的是一个是pc端，一个是移动端的事件。

<template>
  <div ref="el">
    Swipe here
  </div>
</template>

<script>
  setup() {
    const el = ref(null)
    const { isSwiping, direction } = useSwipe(el)

    return { el, isSwiping, direction }
  } 
</script>

useTextSelection 文本选择

文本选择相关数据。

<template>
  <p>{{state.text}}</p>
</template>

<script setup lang="ts">
  import { useTextSelection } from '@vueuse/core'
  const state = useTextSelection()
</script>

文字内容，宽高，以及距离页面上下左右距离。

export declare function useTextSelection(
  element?: MaybeRef<HTMLElement | Document | null | undefined>
): Ref<{
  text: string
  readonly height: number
  readonly width: number
  readonly left: number
  readonly right: number
  readonly top: number
  readonly bottom: number
}>