vue3 动态监听浏览器窗口变化
去监听这个 属性值的变化,如果发生变化则讲这个 val 传递给 this.screenWidth。在 vue mounted 的时候 去挂载一下 window.onresize 方法。这样screenWidth就跟随浏览器的窗口大小动态变化了。定义一个属性记录宽度。
·
定义一个属性记录宽度
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就跟随浏览器的窗口大小动态变化了
进行使用
const programHaplomultiple = computed(() => {
return (screenWidth.value * 0.52) / infoContent.value.width / 320
})
更多推荐
所有评论(0)