定義一個(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)聽這個(gè) 屬性值的變化,如果發(fā)生變化則講這個(gè) val 傳遞給 this.screenWidth
watch(() => screenWidth, (val) => {
screenWidth.value = val
})
這樣screenWidth就跟隨瀏覽器的窗口大小動(dòng)態(tài)變化了文章來源:http://www.zghlxwxcb.cn/news/detail-536980.html
進(jìn)行使用文章來源地址http://www.zghlxwxcb.cn/news/detail-536980.html
const programHaplomultiple = computed(() => {
return (screenWidth.value * 0.52) / infoContent.value.width / 320
})
到了這里,關(guān)于vue3 動(dòng)態(tài)監(jiān)聽瀏覽器窗口變化的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!