vue3動態(tài)監(jiān)聽瀏覽器窗口變化實例
更新時間：2023年07月04日 08:33:55 作者：more名奇妙
這篇文章主要給大家介紹了關(guān)于vue3動態(tài)監(jiān)聽瀏覽器窗口變化的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
定義一個屬性記錄寬度
const screenWidth = ref(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)
在 vue mounted 的時候 去掛載一下 window.onresize 方法
? onMounted(() => {
? ? ? window.onresize = () => {
? ? ? ? return (() => {
? ? ? ? ? screenWidth.value = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
? ? ? ? })()
? ? ? }
? ? })去監(jiān)聽這個 屬性值的變化，如果發(fā)生變化則講這個 val 傳遞給 this.screenWidth
?watch(() => screenWidth, (val) => {
? ? ? screenWidth.value = val
? ? })這樣screenWidth就跟隨瀏覽器的窗口大小動態(tài)變化了
進(jìn)行使用
? ? const programHaplomultiple = computed(() => {
? ? ? return (screenWidth.value * 0.52) / infoContent.value.width / 320
? ? })附：vue3監(jiān)聽窗口變化來進(jìn)行頁面操作
當(dāng)需要監(jiān)聽窗口的寬度變化來對頁面進(jìn)行dom隱藏或修改時，操作如下
onMounted(()=>{
//監(jiān)聽窗口變化
window.onresize=()=>{
return(()=>{
window.screenWidth=document.body.clientWidth;
viewWidth.value=window.screenWidth;
})();
};
});
//視口寬度
const vieWith=ref(document.documentElement.clientWidth||document.body.clientWidth);視口寬度就可以獲取到了，直接用vieWith的值就可以來判斷dom的隱藏或修改啦
總結(jié)
到此這篇關(guān)于vue3動態(tài)監(jiān)聽瀏覽器窗口變化的文章就介紹到這了,更多相關(guān)vue3動態(tài)監(jiān)聽瀏覽器窗口內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue之使用echarts圖表setOption多次很卡問題及解決
這篇文章主要介紹了vue之使用echarts圖表setOption多次很卡問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue Echarts實現(xiàn)柱形圖從右向左滾動效果
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Echarts實現(xiàn)柱形圖從右向左滾動的效果，文中的示例代碼簡潔易懂，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-05-05
Vue內(nèi)聯(lián)處理器中訪問方法和訪問事件參數(shù)詳解
在 Vue 3 中,使用組合式 API 時,可以通過內(nèi)聯(lián)事件處理器來直接在模板中編寫事件處理邏輯,內(nèi)聯(lián)事件處理器不僅可以直接執(zhí)行簡單的操作,還可以調(diào)用組件中的方法,并訪問事件參數(shù),下面將詳細(xì)講解如何在內(nèi)聯(lián)事件處理器中調(diào)用方法以及訪問事件參數(shù),需要的朋友可以參考下2024-12-12
這篇文章主要介紹了Vue中 axios delete請求參數(shù)操作，具有很好的參考價值，希望對大家有所 幫助。一起跟隨小編過來看看吧2020-08-08
使用vue-resource進(jìn)行數(shù)據(jù)交互的實例
下面小編就為大家?guī)硪黄褂胿ue-resource進(jìn)行數(shù)據(jù)交互的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了基于vue 動態(tài)菜單 刷新空白問題的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue3?Axios攔截器封裝成request文件的示例詳解
這篇文章主要介紹了Vue3?Axios攔截器封裝成request文件,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue使用Element-UI部分組件適配移動端問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue?el-switch初始值(默認(rèn)值)不能正確顯示狀態(tài)問題及解決
這篇文章主要介紹了vue?el-switch初始值(默認(rèn)值)不能正確顯示狀態(tài)問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了vuejs移動端實現(xiàn)div拖拽移動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07