Vueuse 是一個功能強大的 Vue.js 生態系統工具庫，提供了可重用的組件和函數，幫助開發者更輕松地構建復雜的應用程序。

官網 ：https://vueuse.org/core/useWindowScroll/

安裝 VueUse

npm i @vueuse/core @vueuse/components

（可選）安裝自動導入，添加到 imports 中

      // 需自動導入方法的庫imports: ['vue','pinia','@vueuse/core','@vueuse/components']

工具庫

獲取鼠標坐標 useMouse()

<script setup lang="ts">
const { x, y } = useMouse()
</script><template><div><p>x:{{ x }}</p><p>y:{{ y }}</p></div>
</template>

監聽鼠標按下 useMousePressed()

<script setup>
const { pressed } = useMousePressed()
</script><template><p>{{ pressed }}</p>
</template>

獲取鼠標選擇的文字 useTextSelection()

<script setup>
const state = useTextSelection()
</script><template><p>一段供鼠標選擇的文字</p><p>被鼠標選擇的文字是：{{ state.text }}</p>
</template>

窗口滾動條 useWindowScroll()

// 獲取滾動條坐標
const { x, y } = useWindowScroll({ behavior: 'smooth' })

<!-- 滾動滾動條 -->
<button @click="x += 200">向右滾動 200 px</button>
<button @click="y += 200">向下滾動 200 px</button><!-- 滾動滾動條到指定位置 -->
<button @click="y = 600">向下滾動到 600 px</button>

元素滾動條 useScroll()

const el = ref<HTMLElement | null>(null)
const { x, y, isScrolling, arrivedState, directions } = useScroll(el)

<div ref="el" />

獲取窗口大小 useWindowSize()

const { width, height } = useWindowSize()

添加事件監聽 useEventListener

<script setup lang="ts">
let num = ref(0)
// 監聽鼠標移動
useEventListener('mousemove', () => {num.value++
})
</script><template><div class="p-20"><p>num:{{ num }}</p></div>
</template>

• 組件卸載時，監聽事件會自動被移除

復制到剪貼板 useClipboard()

<script setup lang="ts">
const { copy, copied, isSupported, text } = useClipboard()let msg = '你好'async function doCopy() {copy(msg)if (copied) {alert('已復制到剪貼板！')}
}
</script><template><div class="p-20"><p>{{ msg }}</p><p v-if="text">已復制到剪貼板的內容：{{ text }}</p><button v-if="isSupported" @click="doCopy">復制</button></div>
</template>

• copy 復制的方法
• copied 是否完成復制
• isSupported 瀏覽器是否支持復制到剪貼板
• text 復制到剪貼板的內容

選擇本地文件 useFileDialog()

<script setup lang="ts">
const { files, open, reset, onChange } = useFileDialog()
onChange((files) => {console.log(files)
})
</script><template><button type="button" @click="open()">選擇文件</button><button type="button" :disabled="!files" @click="reset()">清空選擇</button><template v-if="files"><p>已選擇 <b>{{ `${files.length}` }}</b> 個文件</p><li v-for="file of files" :key="file.name">{{ file.name }}</li></template>
</template>

切換全屏模式 useFullscreen()

<script setup lang="ts">
const { isFullscreen, enter, exit, toggle } = useFullscreen()
</script><template><button v-if="isFullscreen" @click="exit">退出全屏</button><button v-else @click="enter">全屏</button><button @click="toggle">切換全屏模式</button>
</template>

圖片加載 useImage

<script setup>
const avatarUrl = 'https://place.dog/300/200'
const { isLoading, error } = useImage({ src: avatarUrl })
</script><template><span v-if="isLoading">圖片加載中...</span><span v-else-if="error">圖片加載失敗</span><img v-else :src="avatarUrl" />
</template>

獲取聯網信息 useNetwork()

const { isOnline, offlineAt, downlink, downlinkMax, effectiveType, saveData, type } = useNetwork()

判斷是否聯網 useOnline()

const online = useOnline()

給元素添加動畫 useOnline()

<script setup>
const el = ref()
const {isSupported,animate,// actionsplay,pause,reverse,finish,cancel,// statespending,playState,replaceState,startTime,currentTime,timeline,playbackRate
} = useAnimate(el, { transform: 'rotate(360deg)' }, 1000)
</script><template><div class="p-40"><span ref="el" style="display: inline-block">旋轉360度</span></div>
</template>

可控的計時器 useIntervalFn()

<script setup>
let num = ref(0)
const { pause, resume, isActive } = useIntervalFn(() => {num.value++
}, 1000)
</script><template><div class="p-40"><div>{{ num }}</div><button v-if="isActive" @click="pause">暫停計時器</button><button v-else @click="resume">恢復計時器</button></div>
</template>

暫停代碼執行 promiseTimeout

import { promiseTimeout } from '@vueuse/core'
async function print() {// 開啟 console 的默認計時器console.time()// 打印當前 console默認計時器 的時間console.timeLog()// 等待1s后執行await promiseTimeout(1000)// 打印當前 console默認計時器 的時間console.timeLog()
}
print()

獲取網頁標題 useTitle()

const title = useTitle()
console.log(title.value) // 打印當前網頁的標題

更多工具可參考官網，持續更新中！

組件庫

圖片加載 UseImage

<script setup lang="ts">
import { UseImage } from '@vueuse/components'
</script><template><UseImage src="https://place.dog/300/200"><!-- 建議優化為圖片加載動畫 --><template #loading> 圖片加載中.. </template><template #error> 圖片加載失敗 </template></UseImage>
</template>

一鍵復制到剪貼板 UseClipboard

<script setup lang="ts">
import { UseClipboard } from '@vueuse/components'
</script><template><UseClipboard v-slot="{ copy, copied }" source="復制的內容"><button @click="copy()"><!-- 建議優化為復制相關的圖標 -->{{ copied ? '復制成功' : '復制' }}</button></UseClipboard>
</template>

獲取聯網狀態 UseNetwork / UseOnline

<script setup>
import { UseNetwork } from '@vueuse/components'
</script><template><UseNetwork v-slot="{ isOnline }"> 是否聯網: {{ isOnline }} </UseNetwork>
</template>

另一個也類似

<script setup>
import { UseOnline } from '@vueuse/components'
</script><template><UseOnline v-slot="{ isOnline }"> 是否聯網: {{ isOnline }} </UseOnline>
</template>

更多組件可參考官網，持續更新中！