VueUse是一個(gè)基于Composition API的實(shí)用函數(shù)集合，支持Vue2和Vue3，使用它可以幫助我們快速實(shí)現(xiàn)日常開發(fā)中一些常見的需求。本文將分享列舉幾個(gè)常見的需求來通過VueUse實(shí)現(xiàn)，讓大家感受其魅力！

使用前安裝

Vue3:

npm i @vueuse/core --save

Vue2 的話還需要額外安裝 @vue/composition-api

npm i @vue/composition-api --save

網(wǎng)頁全屏

在后臺(tái)管理系統(tǒng)中，往往都有一個(gè)開啟網(wǎng)頁全屏的功能，大部分都是使用screenfull插件實(shí)現(xiàn)的。

VueUse里為我們提供了相關(guān)的API，讓我們可以輕松的實(shí)現(xiàn)網(wǎng)頁全屏。

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

useFullscreen也支持傳入某個(gè)元素，這樣只會(huì)對(duì)該元素區(qū)域進(jìn)行全屏顯示。

<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>

剪切板

以前在Vue2里都是用vue-clipboard2插件來實(shí)現(xiàn)的，同樣的，用VueUse也可以輕松實(shí)現(xiàn)。

<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('我是被復(fù)制的內(nèi)容').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>

調(diào)用open函數(shù)即可打開取色器，在任意地方點(diǎn)擊鼠標(biāo)左鍵即可響應(yīng)式得到顏色。

拖拽元素

<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>

簡(jiǎn)單的幾行代碼就能讓元素可拖拽。

本地緩存

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

上面的代碼會(huì)以test作為key存入一個(gè)對(duì)象，返回值是一個(gè)ref類型。

該操作可以讓我們不用像使用原生API一樣進(jìn)行 json to string 的轉(zhuǎn)換。

接著我們便可以很方便的操作對(duì)象里的某一個(gè)字段，而不需要我們使用原生API那樣取出一整個(gè)對(duì)象再進(jìn)行替換，可以說是非常令人舒適了。

state.value.id == 'abc' // 查看localStorage可以發(fā)現(xiàn)id被更改為abc

使用sessionStorage方式：

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

其他

安全區(qū)域

使用useScreenSafeArea可以輕松獲得屏幕的安全區(qū)域距離，再也不用擔(dān)心劉海屏和底部安全距離了。

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

動(dòng)態(tài)修改favicon

如果在項(xiàng)目里需要我們?nèi)?dòng)態(tài)修改favicon，創(chuàng)建標(biāo)簽、添加元素、替換地址等等操作，雖然代碼量也不是很多，但顯然用下面的方式要方便得多了。

<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>

如上，我們可以動(dòng)態(tài)的將一張圖片設(shè)置為網(wǎng)站的icon。

以上就是VueUse功能精簡(jiǎn)你的dependencies的詳細(xì)內(nèi)容，更多關(guān)于VueUse精簡(jiǎn)dependencies的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: