Vue3使用hook封裝媒體查詢和事件監(jiān)聽的代碼示例
更新時間：2023年07月04日 09:54:43 作者：萌萌噠草頭將軍
這篇文章主要給大家詳細(xì)介紹Vue3如何使用hook封裝媒體查詢和事件監(jiān)聽，使得Vue的開發(fā)更加絲滑，文中通過代碼示例給大家介紹的非常詳細(xì)，感興趣的同學(xué)跟著小編一起來學(xué)習(xí)吧
js中媒體查詢的主要方法是使用window對象下的matchMedia對象，查詢語句和CSS媒體查詢一樣。
封裝媒體查詢
首先我們先看監(jiān)聽系統(tǒng)主題色的例子
- 首先創(chuàng)建媒體查詢對象
- 根據(jù)查詢結(jié)果設(shè)置對應(yīng)的值
- 然后建立監(jiān)聽事件，并且在退出時取消監(jiān)聽
export const useTheme = () => {
// 首先創(chuàng)建媒體查詢對象
const themeMedia = matchMedia("(prefers-color-scheme: light)")
// 根據(jù)查詢結(jié)果設(shè)置對應(yīng)的值
const theme = ref(themeMedia.matches ? 'light' : 'dark')
const onChange = (e: MediaQueryListEvent) => theme.value = e.matches ? 'light' : 'dark'
watchEffect((onCleanup) => {
// 然后建立監(jiān)聽事件
themeMedia.addEventListener('change', onChange)
// 并且在退出時取消監(jiān)聽
onCleanup(() => themeMedia.removeEventListener('change', onChange))
})
return theme;
}我們測試下
const theme = useTheme() watchEffect(() => console.log(theme.value, 'theme'))
如果我們其他查詢查詢，我們需要重新設(shè)置新的值，所以，接下來我們封裝一個更通用的媒體查詢hook，如下，
export const useMatchMedia = (query: string) => {
const themeMedia = matchMedia(query)
const match = ref(themeMedia.matches)
const onChange = (e: MediaQueryListEvent) => match.value = e.matches
watchEffect((onCleanup) => {
themeMedia.addEventListener('change', onChange)
onCleanup(() => themeMedia.removeEventListener('change', onChange))
})
return match
}這個例子里，我們不再對特定的媒體查詢值做處理，同時，我們將查詢語句作為動態(tài)變量，將結(jié)果處理交給開發(fā)者。
我們使用通用的hook重寫監(jiān)聽系統(tǒng)主題色的hook，如下：
export const useTheme = () => {
const theme = useMatchMedia("(prefers-color-scheme: light)")
const theme = ref(themeMedia.matches ? 'light' : 'dark')
return theme ? 'light' : 'dark'
}是不是這樣更簡潔了。
封裝事件監(jiān)聽
接下來，我們再看第二個簡單的例子，監(jiān)聽網(wǎng)絡(luò)狀態(tài)。
監(jiān)聽網(wǎng)絡(luò)狀態(tài)，主要通過監(jiān)聽navigator.onLine的變化，值的變化可以通過addEventListener方法，
有了封裝媒體查詢的例子，我們首先會想到封裝事件監(jiān)聽的值的變化可以通過addEventListener方法，成為一個通用的鉤子函數(shù)。如下：
export const useEventListener = <K extends keyof WindowEventMap>(
target: K,
listener: (ev: WindowEventMap[K]) => any
) => {
watchEffect((onCleanup) => {
addEventListener(target, listener)
onCleanup(() => removeEventListener(target, listener))
})
}此時，我們就可以這樣封裝監(jiān)聽網(wǎng)絡(luò)狀態(tài)的hook了
export const useNetWork = () => {
const isOnLine = ref(navigator.onLine)
const setOnLine = () => isOnLine.value = true
const setOffLine = () => isOnLine.value = false
useEventListener('online', setOnLine)
useEventListener('offline', setOffLine)
return isOnLine
}我們測試下
const isOnLine = useNetWork() watchEffect(() => console.log(isOnLine.value, 'isOnLine')) <h1 v-if="isOnLine">onLine</h1> <h1 v-else>offLine</h1>
接下來我們測試下其他的監(jiān)聽事件，比如監(jiān)聽scroll事件。
useEventListener('scroll', () => console.log('scroll'))
功能是正常的，但是順理成章，我們還需要寫一個防抖函數(shù)
export const debounce = (
fn: (...args: any[]) => void,
delay: number
) => {
let timer: NodeJS.Timeout
return (...args: any[]) => {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}useEventListener('scroll', debounce(() => console.log('scroll'), 200))
好了今天的分享到這了，如果文章中有紕漏的地方歡迎指正，我及時修改，感謝你的閱讀
以上就是Vue3使用hook封裝媒體查詢和事件監(jiān)聽的代碼示例的詳細(xì)內(nèi)容，更多關(guān)于Vue3 hook封裝媒體查詢和事件監(jiān)聽的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue3使用Electron打包成exe的方法與打包報錯解決
在前端開發(fā)中,Electron是一種常用的工具,它允許開發(fā)者使用Web技術(shù)構(gòu)建桌面應(yīng)用程序,本文主要介紹了vue3使用Electron打包成exe的方法與打包報錯解決,具有一定的參考價值,感興趣的可以了解一下2024-06-06
當(dāng)用戶在網(wǎng)站登錄后,服務(wù)器會在其瀏覽器上設(shè)置一個包含登錄信息的Cookie,通過這個Cookie,服務(wù)器能夠識別用戶是否已登錄,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
這篇文章大家分享了vue中axios的封裝的相關(guān)知識點以及實例代碼，有興趣的朋友參考學(xué)習(xí)下。2018-07-07
在使用Element Plus中的table組件展示數(shù)據(jù)時,由于需要對表格行內(nèi)數(shù)據(jù)的數(shù)據(jù)進行修改,下面這篇文章主要給大家介紹了關(guān)于Element?Plus修改表格行和單元格樣式的相關(guān)資料,需要的朋友可以參考下2022-04-04
今天小編就為大家分享一篇在Vue mounted方法中使用data變量詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了ant-desigin-vue中form表單的使用解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
利用Vue3和element-plus實現(xiàn)圖片上傳組件
element-plus提供了uploader組件，但是不好定制化。所以本文將利用Vue3和element-plus實現(xiàn)一個圖片上傳的組件，感興趣的可以了解一下2022-03-03
使用el-checkbox-group選中后值為true和false遇到的坑
這篇文章主要介紹了使用el-checkbox-group選中后值為true和false遇到的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家介紹了undefined是否會變?yōu)閚ull原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了vue data不可以使用箭頭函數(shù)問題，本文通過源碼解析給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07