vue3動(dòng)態(tài)監(jiān)聽(tīng)瀏覽器窗口變化實(shí)例
定義一個(gè)屬性記錄寬度
const screenWidth = ref(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)
在 vue mounted 的時(shí)候 去掛載一下 window.onresize 方法
? onMounted(() => {
? ? ? window.onresize = () => {
? ? ? ? return (() => {
? ? ? ? ? screenWidth.value = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
? ? ? ? })()
? ? ? }
? ? })去監(jiān)聽(tīng)這個(gè) 屬性值的變化，如果發(fā)生變化則講這個(gè) val 傳遞給 this.screenWidth
?watch(() => screenWidth, (val) => {
? ? ? screenWidth.value = val
? ? })這樣screenWidth就跟隨瀏覽器的窗口大小動(dòng)態(tài)變化了
進(jìn)行使用
? ? const programHaplomultiple = computed(() => {
? ? ? return (screenWidth.value * 0.52) / infoContent.value.width / 320
? ? })附：vue3監(jiān)聽(tīng)窗口變化來(lái)進(jìn)行頁(yè)面操作
當(dāng)需要監(jiān)聽(tīng)窗口的寬度變化來(lái)對(duì)頁(yè)面進(jìn)行dom隱藏或修改時(shí)，操作如下
onMounted(()=>{
//監(jiān)聽(tīng)窗口變化
window.onresize=()=>{
return(()=>{
window.screenWidth=document.body.clientWidth;
viewWidth.value=window.screenWidth;
})();
};
});
//視口寬度
const vieWith=ref(document.documentElement.clientWidth||document.body.clientWidth);視口寬度就可以獲取到了，直接用vieWith的值就可以來(lái)判斷dom的隱藏或修改啦
總結(jié)
到此這篇關(guān)于vue3動(dòng)態(tài)監(jiān)聽(tīng)瀏覽器窗口變化的文章就介紹到這了,更多相關(guān)vue3動(dòng)態(tài)監(jiān)聽(tīng)瀏覽器窗口內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue2 element 表頭查詢功能實(shí)現(xiàn)代碼
本文介紹Vue2中Element UI表格自定義表頭及查詢功能實(shí)現(xiàn),需通過(guò)slot-scope綁定數(shù)據(jù),注意Vue2.6+版本改用#header語(yǔ)法,并提供示例代碼說(shuō)明,感興趣的朋友一起看看吧2025-07-07
解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navig
這篇文章主要給大家介紹了關(guān)于解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navigation?to?current?location的相關(guān)資料,這是最近做項(xiàng)目時(shí)候遇到的一個(gè)問(wèn)題,現(xiàn)將解決辦法分享出來(lái),需要的朋友可以參考下2023-01-01
vue3在單個(gè)組件中實(shí)現(xiàn)類(lèi)似mixin的事件調(diào)用
這篇文章主要為大家詳細(xì)介紹了vue3如何在單個(gè)組件中實(shí)現(xiàn)類(lèi)似mixin的事件調(diào)用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
Element?plus?表單中下拉框的空值問(wèn)題解決
有時(shí)候會(huì)碰到查詢條件需要用下拉框來(lái)區(qū)分的時(shí)候,比如需要區(qū)分全部?|?啟用?|?停用三個(gè)狀態(tài),這時(shí)一般會(huì)給全部的value值設(shè)置為'',但是這樣會(huì)導(dǎo)致下拉框無(wú)法選中對(duì)應(yīng)的全部選項(xiàng),本文就來(lái)介紹一下這個(gè)問(wèn)題解決,感興趣的可以了解一下2024-11-11
當(dāng)我們談?wù)摶蛴懻撛?Vue?中創(chuàng)建用戶界面組件時(shí),經(jīng)常會(huì)提到可重用性,在?Vue?中創(chuàng)建真正的可重用組件可能很棘手,在本文中,我將探討可重用組件的概念、應(yīng)用這些組件時(shí)面臨的問(wèn)題,以及為什么必須盡可能克服這些問(wèn)題,需要的朋友可以參考下2023-10-10
基于Ant-design-vue的Modal彈窗 封裝 命令式與Hooks用法
這篇文章主要給大家介紹了基于Ant-design-vue的Modal彈窗封裝命令式與Hooks用法，文中有詳細(xì)的代碼示例，具有一定的參考價(jià)值，感興趣的同學(xué)可以借鑒閱讀2023-06-06
axios對(duì)請(qǐng)求各種異常情況處理的封裝方法
今天小編就為大家分享一篇axios對(duì)請(qǐng)求各種異常情況處理的封裝方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
本文通過(guò)實(shí)例代碼給大家介紹了vue中的inject學(xué)習(xí)教程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-04-04
這篇文章主要介紹了vue如何截取字符串，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了在Vue中使用Echarts++封裝,需要的朋友可以參考下2023-11-11