VueUse中常用的组合式API这里就列举常用工具，详情请去官网查看所有 VueUse地址: (VueUse中文文档

这里就列举常用工具，详情请去官网查看所有 VueUse地址: (VueUse中文文档 | VueUse中文文档 (vueusejs.com))

pnpm add @vueuse/core

npm i @vueuse/core

useFullscreen 全屏展示

import { useFullscreen } from '@vueuse/core'

//isFullscreen 当前是否是全屏
//toggle  是函数直接调用即可
const { isFullscreen, toggle } = useFullscreen();

useClipboard 粘贴功能

import { useClipboard } from '@vueuse/core'

//text 粘贴的内容
//copy 是粘贴函数
const source = ref('Hello') 
const { text, copy, copied, isSupported } = useClipboard({ source })

useDark 开启暗黑模式工具

这个需要自定义样式类通过 toggleDark函数控制

import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark({
  selector: "body",//class渲染的标签

  valueDark: "dark",//暗黑class名字
  valueLight: "light"//高亮class名字
});
const toggleDark = useToggle(isDark);

useTitle 响应式设置标题内容

import { useTitle } from '@vueuse/core'

const title = useTitle()
console.log(title.value) // print current title
title.value = 'Hello' // change current title

useUrlSearchParams 设置Url内容

import { useUrlSearchParams } from '@vueuse/core'

const params = useUrlSearchParams('history')
params.foo = 'bar';
params.vueuse = 'awesome';

useWindowSize 响应式获取窗口尺寸

import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()