VueUse功能精简你的dependencies

npm i @vueuse/core --save

npm i @vue/composition-api --save

<template>
  <el-button @click="toggle">
    {{ isFullscreen ? '退出全屏' : '开启全屏' }}
  </el-button>
</template>
<script lang="ts" setup>
import { useFullscreen } from '@vueuse/core'
const { isFullscreen, toggle } = useFullscreen()
</script>

<template>
  <el-button @click="toggle">
    开启全屏
  </el-button>
  <div ref="el">把我全屏</div>
</template>
<script lang="ts" setup>
import { useFullscreen } from '@vueuse/core'
const el = ref<HTMLElement | null>(null)
const { toggle } = useFullscreen(el)
</script>

<template>
  <el-button @click="onClick">copy</el-button>
</template>
<script lang="ts" setup>
import { useClipboard } from '@vueuse/core'
const { isSupported, copy } = useClipboard()
const onClick = () => {
  if (isSupported) {
    copy('我是被复制的内容').then(() => {
      console.log('copy success')
    })
  } else {
    alert('Your browser does not support Clipboard API')
  }
}
</script>

<template>
  <div>
    <el-button @click="open">打开取色器</el-button>
    <el-button type="primary" style="width: 100px">按钮</el-button>
    <p>颜色：{{ sRGBHex }}</p>
  </div>
</template>
<script lang="ts" setup>
import { useEyeDropper } from '@vueuse/core'
const { open, sRGBHex } = useEyeDropper()
</script>

<template>
  <div
    ref="el"
    style="position: fixed; width: 400px; height: 400px; background: red"
    :style="style"
  ></div>
  <p>x: {{ x }}，y：{{ y }}</p>
</template>
<script lang="ts" setup>
import { useDraggable } from '@vueuse/core'
const el = ref<HTMLElement | null>(null)
const { x, y, style } = useDraggable(el)
</script>

<script lang="ts" setup>
import { useStorage } from '@vueuse/core'
const state = useStorage('test', { id: 'xxxx', name: 'james' })
</script>

state.value.id == 'abc' // 查看localStorage可以发现id被更改为abc

const state = useStorage('test', { id: 'xxxx', name: 'james' }, sessionStorage)

<script lang="ts" setup>
import { useScreenSafeArea } from '@vueuse/core'
const { top, right, bottom, left } = useScreenSafeArea()
</script>

<template>
  <el-button @click="onClick">切换favicon</el-button>
</template>
<script lang="ts" setup>
import { useFavicon } from '@vueuse/core'
import Logo from '@/assets/image/logo.png'
const icon = useFavicon()
const onClick = () => {
  icon.value = Logo
}
</script>