VueUse功能精簡你的dependencies

Posted on by

引言

VueUse是一個基於Composition API的實用函數集合，支持Vue2和Vue3，使用它可以幫助我們快速實現日常開發中一些常見的需求。本文將分享列舉幾個常見的需求來通過VueUse實現，讓大傢感受其魅力！

使用前安裝

Vue3:

npm i @vueuse/core --save

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

npm i @vue/composition-api --save

網頁全屏

在後臺管理系統中，往往都有一個開啟網頁全屏的功能，大部分都是使用screenfull插件實現的。

VueUse裡為我們提供瞭相關的API，讓我們可以輕松的實現網頁全屏。

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

useFullscreen也支持傳入某個元素，這樣隻會對該元素區域進行全屏顯示。

<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插件來實現的，同樣的，用VueUse也可以輕松實現。

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

調用open函數即可打開取色器，在任意地方點擊鼠標左鍵即可響應式得到顏色。

拖拽元素

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

上面的代碼會以test作為key存入一個對象，返回值是一個ref類型。

該操作可以讓我們不用像使用原生API一樣進行 json to string 的轉換。

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

state.value.id == 'abc' // 查看localStorage可以發現id被更改為abc

使用sessionStorage方式：

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

其他

安全區域

使用useScreenSafeArea可以輕松獲得屏幕的安全區域距離，再也不用擔心劉海屏和底部安全距離瞭。

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

動態修改favicon

如果在項目裡需要我們去動態修改favicon，創建標簽、添加元素、替換地址等等操作，雖然代碼量也不是很多，但顯然用下面的方式要方便得多瞭。

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

如上，我們可以動態的將一張圖片設置為網站的icon。

以上就是VueUse功能精簡你的dependencies的詳細內容，更多關於VueUse精簡dependencies的資料請關註WalkonNet其它相關文章！

推薦閱讀：