vueUse常用Api

vueUse工具常用Api

简介：vueuse 是一个用于 vue 项目中的常用工具集，是 Anthony Fu 的一个开源项目，提供了大量适用于 Vue 2 和 Vue 3 的基本 Composition API 实用程序函数。

官网：vueUse-code.js
常用函数

useUrlSearchParams 路由参数 获取url中query参数，或者设置query参数

import { useUrlSearchParams } from '@vueuse/core'

const params = useUrlSearchParams('history') //history模式
const params = useUrlSearchParams('hash') //hash模式

console.log(params.foo) // 'bar'
params.foo = 'bar'
params.vueuse = 'awesome'

usePreferredColorScheme 系统主题 获取系统主题模式

import { usePreferredColorScheme } from '@vueuse/core'

const preferredColor = usePreferredColorScheme()

useFullscreen 全屏 dom全屏，进入和退出，切换方法

// dom
const el = ref<HTMLElement | null>(null)

const { isFullscreen, enter, exit, toggle } = useFullscreen(el)

useMediaControls 媒体标签参数 可获取媒体组件video的参数，具体参数参考文档接口

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useMediaControls } from '@vueuse/core'

const video = ref()
const { playing, currentTime, duration, volume } = useMediaControls(video, { 
  src: 'video.mp4',
})

// Change initial media properties
onMounted(() => {
  volume.value = 0.5
  currentTime.value = 60
})
</script>

<template>
  <video ref="video" />
  <button @click="playing = !playing">Play / Pause</button>
  <span>{
  { currentTime }} / {
  { duration }}</span>
</template>

useMouse 获取鼠标位置

<template>
    <div>
        <p>x的值：{
  { x }}</p>
        <p>y的值：{
  { y }}</p>
    </div>
</template>

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

    const { x, y } = useMouse({
        type: 'page', // 鼠标的位置是相对页面(page)还是浏览器(client)
        touch: true,
        resetOnTouchEnds: false,
        initialValue: {
            x: 100,
            y: 200
        }
    })
</script>

useDebounceFn 防抖,持续触发事件时，一定时间段内没有再触发事件

<template>
    <p> {
  { counter }}</p>

    <button @click="clickedFn">UseDebounceFn</button>
</template>

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

    const counter = ref(0)
    // 第三个参数为最大等待时间，类似于 lodash debounce
    const debouncedFn = useDebounceFn(() => {
        counter.value += 1
    }, 1000, { maxWait: 5000 })

    const clickedFn = () => {
        debouncedFn()
    }
</script>

useIntersectionObserver 监听进入可视区域行为,实现数据的懒加载

// stop 是停止观察是否进入或移出可视区域的行为    
const { stop } = useIntersectionObserver(
  // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
  target,
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  // observerElement 被观察的dom
  ([{ isIntersecting }], observerElement) => {
    // 在此处可根据isIntersecting来判断，然后做业务
    //如果进入了可视区，就先让其停止监测，然后进行数据的请求
    if (isIntersecting) {
          stop()
          findNew().then(data => {
          goods.value = data.result
    })
  },
    // 配置选项，相交的比例大于0就触发
    {
      threshold: 0
    }
)

useVirtualList 创建虚拟列表，实现虚拟滚动条

<script setup lang="ts">
import type { Ref } from 'vue'
import { computed, ref } from 'vue'
import { useVirtualList } from '@vueuse/core'
const index: Ref = ref()
const search = ref('')
const allItems = Array.from(Array(99999).keys())
  .map(i => ({
    height: i % 2 === 0 ? 42 : 84,
    size: i % 2 === 0 ? 'small' : 'large',
  }))
const filteredItems = computed(() => {
  return allItems.filter(i => i.size.startsWith(search.value.toLowerCase()))
})
const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
  filteredItems,
  {
    itemHeight: i => (filteredItems.value[i].height + 8),
    overscan: 10,
  },
)
const handleScrollTo = () => {
  scrollTo(index.value)
}
</script>

<template>
  <div>
    <div>
      <div class="inline-block mr-4">
        Jump to index
        <input v-model="index" placeholder="Index" type="number">
      </div>
      <button type="button" @click="handleScrollTo">
        Go
      </button>
    </div>
    <div>
      <div class="inline-block mr-4">
        Filter list by size
        <input v-model="search" placeholder="e.g. small, medium, large" type="search">
      </div>
    </div>
    <div v-bind="containerProps" class="h-300px overflow-auto p-2 bg-gray-500/5 rounded">
      <div v-bind="wrapperProps">
        <div
          v-for="{ index, data } in list"
          :key="