vue监听页面宽度高度

Posted 2023-03-01

参考技术A 监听窗口变化：window.onresize
JS的一些方法：
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)

data ()
return
screenWidth: document.body.clientWidth

,
mounted ()
const that = this
window.onresize = () =>
return (() =>
window.screenWidth = document.body.clientWidth
that.screenWidth = window.screenWidth
)()

，
watch:
screenWidth(val)
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
if(!this.timer)
// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
this.screenWidth = val
this.timer = true
let that = this
setTimeout(function()
// 打印screenWidth变化的值
console.log(that.screenWidth)
that.timer = false
,400)