vue3動態(tài)監(jiān)聽瀏覽器窗口變化實(shí)例
更新時間：2023年07月04日 08:33:55 作者：more名奇妙
這篇文章主要給大家介紹了關(guān)于vue3動態(tài)監(jiān)聽瀏覽器窗口變化的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(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)文章
Vue2 element 表頭查詢功能實(shí)現(xiàn)代碼
本文介紹Vue2中Element UI表格自定義表頭及查詢功能實(shí)現(xiàn),需通過slot-scope綁定數(shù)據(jù),注意Vue2.6+版本改用#header語法,并提供示例代碼說明,感興趣的朋友一起看看吧2025-07-07
解決Vue路由導(dǎo)航報錯:NavigationDuplicated:?Avoided?redundant?navig
這篇文章主要給大家介紹了關(guān)于解決Vue路由導(dǎo)航報錯:NavigationDuplicated:?Avoided?redundant?navigation?to?current?location的相關(guān)資料,這是最近做項(xiàng)目時候遇到的一個問題,現(xiàn)將解決辦法分享出來,需要的朋友可以參考下2023-01-01
vue3在單個組件中實(shí)現(xiàn)類似mixin的事件調(diào)用
這篇文章主要為大家詳細(xì)介紹了vue3如何在單個組件中實(shí)現(xiàn)類似mixin的事件調(diào)用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
有時候會碰到查詢條件需要用下拉框來區(qū)分的時候,比如需要區(qū)分全部?|?啟用?|?停用三個狀態(tài),這時一般會給全部的value值設(shè)置為'',但是這樣會導(dǎo)致下拉框無法選中對應(yīng)的全部選項(xiàng),本文就來介紹一下這個問題解決,感興趣的可以了解一下2024-11-11
當(dāng)我們談?wù)摶蛴懻撛?Vue?中創(chuàng)建用戶界面組件時,經(jīng)常會提到可重用性,在?Vue?中創(chuàng)建真正的可重用組件可能很棘手,在本文中,我將探討可重用組件的概念、應(yīng)用這些組件時面臨的問題,以及為什么必須盡可能克服這些問題,需要的朋友可以參考下2023-10-10
基于Ant-design-vue的Modal彈窗 封裝 命令式與Hooks用法
這篇文章主要給大家介紹了基于Ant-design-vue的Modal彈窗封裝命令式與Hooks用法，文中有詳細(xì)的代碼示例，具有一定的參考價值，感興趣的同學(xué)可以借鑒閱讀2023-06-06
今天小編就為大家分享一篇axios對請求各種異常情況處理的封裝方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本文通過實(shí)例代碼給大家介紹了vue中的inject學(xué)習(xí)教程，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-04-04
這篇文章主要介紹了vue如何截取字符串，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了在Vue中使用Echarts++封裝,需要的朋友可以參考下2023-11-11