定义一个属性记录宽度
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
})()
}
})
去监听这个 属性值的变化,如果发生变化则讲这个 val 传递给 this.screenWidth
watch(() => screenWidth, (val) => {
screenWidth.value = val
})
这样screenWidth就跟随浏览器的窗口大小动态变化了文章来源:https://www.toymoban.com/news/detail-536980.html
进行使用文章来源地址https://www.toymoban.com/news/detail-536980.html
const programHaplomultiple = computed(() => {
return (screenWidth.value * 0.52) / infoContent.value.width / 320
})
到了这里,关于vue3 动态监听浏览器窗口变化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!