详细讲一下VueUse(1-10)中我认为好用且常用的方法

本期是一个专栏，旨在帮助大家了解VueUse好用的方法，要是能利用好，开发的效率将会大大增加！！

1.useElementBounding - 获取元素的位置和尺寸信息

import { ref } from 'vue'
import { useElementBounding } from '@vueuse/core'

const el = ref(null)
const {
    x,      // 元素左边距离视口左边的距离
    y,      // 元素顶部距离视口顶部的距离
    top,    // 元素顶部距离文档顶部的距离
    right,  // 元素右边距离文档左边的距离
    bottom, // 元素底部距离文档顶部的距离
    left,   // 元素左边距离文档左边的距离
    width,  // 元素的宽度
    height  // 元素的高度
} = useElementBounding(el)

// 使用示例
const centerPoint = computed(() => ({
    x: x.value + width.value / 2,
    y: y.value + height.value / 2
}))

2.useScroll - 监听滚动位置

import { useScroll } from '@vueuse/core'

// 监听整个页面的滚动
const { x, y, isScrolling, arrivedState } = useScroll(window)

// arrivedState包含四个属性
const { 
    top,    // 是否滚动到顶部
    bottom, // 是否滚动到底部
    left,   // 是否滚动到最左边
    right   // 是否滚动到最右边
} = arrivedState

// 监听特定元素的滚动
const el = ref(null)
const { x, y } = useScroll(el)

3.useIntersectionObserver - 监听元素是否进入视口

import { useIntersectionObserver } from '@vueuse/core'

const target = ref(null)
const isVisible = ref(false)

const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
        isVisible.value = isIntersecting
    },
    // 配置选项
    {
        threshold: 0.5, // 元素可见面积达到50%时触发
        root: null,     // 视口
        rootMargin: '0px' // 视口边距
    }
)

// 停止观察
onUnmounted(() => stop())

4.useFullscreen - 控制元素全屏

import { useFullscreen } from '@vueuse/core'

const el = ref(null)
const { 
    isFullscreen,  // 是否全屏
    enter,         // 进入全屏
    exit,          // 退出全屏
    toggle         // 切换全屏状态
} = useFullscreen(el)

// 使用示例
const onFullscreen = async () => {
    await enter() // 进入全屏
    // 或者使用 toggle()
}

5.useLocalStorage/useSessionStorage - 响应式的本地存储

import { useLocalStorage } from '@vueuse/core'

// 基本使用
const state = useLocalStorage(
    'my-storage-key',  // 存储的键名
    'default value'    // 默认值
)

// 存储对象
const userData = useLocalStorage(
    'user-data',
    {
        name: '',
        age: 0,
        preferences: {}
    }
)

// 自动同步
userData.value.name = 'John' // 自动保存到localStorage

6.useVModel - 简化组件的双向绑定

import { useVModel } from '@vueuse/core'

const props = defineProps({
    modelValue: Boolean,
    title: String
})
const emit = defineEmits(['update:modelValue', 'update:title'])

// 创建双向绑定的ref
const isVisible = useVModel(props, 'modelValue', emit)
const title = useVModel(props, 'title', emit)

// 直接修改ref的值会触发emit
isVisible.value = false // 会触发 'update:modelValue'

7.useWindowSize - 获取窗口尺寸

import { useWindowSize } from '@vueuse/core'

const { width, height } = useWindowSize()

// 响应式使用
const isMobile = computed(() => width.value < 768)
const isTablet = computed(() => width.value >= 768 && width.value < 1024)
const isDesktop = computed(() => width.value >= 1024)

8.onClickOutside - 监听元素外部点击

import { onClickOutside } from '@vueuse/core'

const el = ref(null)
const isOpen = ref(true)

onClickOutside(el, () => {
    isOpen.value = false
})

// 带选项的使用
onClickOutside(el, () => {
    isOpen.value = false
}, {
    ignore: ['.ignore-class'], // 忽略特定元素
    capture: true,             // 使用捕获阶段
    detectIframe: true         // 检测iframe内的点击
})

9.useMediaQuery - 响应式媒体查询

import { useMediaQuery } from '@vueuse/core'

// 检测深色模式
const isDark = useMediaQuery('(prefers-color-scheme: dark)')

// 检测设备类型
const isMobile = useMediaQuery('(max-width: 768px)')
const isTablet = useMediaQuery('(min-width: 769px) and (max-width: 1024px)')
const isDesktop = useMediaQuery('(min-width: 1025px)')

10.useClipboard - 剪贴板操作

import { useClipboard } from '@vueuse/core'

const { text, copy, copied } = useClipboard()

// 复制文本
const copyText = async () => {
    await copy('要复制的文本')
    if (copied.value) {
        // 复制成功
        console.log('文本已复制')
    }
}

// 获取剪贴板内容
console.log(text.value)