亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue3動(dòng)態(tài)監(jiān)聽(tīng)瀏覽器窗口變化實(shí)例

 更新時(shí)間：2023年07月04日 08:33:55   作者：more名奇妙  
這篇文章主要給大家介紹了關(guān)于vue3動(dòng)態(tài)監(jiān)聽(tīng)瀏覽器窗口變化的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

定義一個(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)文章

最新評(píng)論