VueUse怎么使用

這篇文章主要介紹“VueUse怎么使用”，在日常操作中，相信很多人在VueUse怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”VueUse怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

引言

VueUse是一個基于Composition API的實用函數集合，支持Vue2和Vue3，使用它可以幫助我們快速實現日常開發中一些常見的需求。

使用前安裝

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" >按鈕</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"
    
    :
  ></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怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！