网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
我们将document.body.clientWidth赋值给data中自定义的变量：
data:{
screenHeight: document.body.clientHeight
}
在页面mounted时，挂载window.onresize方法：
mounted () {
const that = this
window.onresize = () => {
return (() => {
// 可以限制最小高度
// if (document.body.clientHeight - 240 < 450) {
// return
// }
window.screenHeight = document.body.clientHeight
that.screenHeight = window.screenHeight
})()
}
}
监听screenWidth属性值的变化，打印并观察screenWidth发生变化的值：
watch: {
screenHeight (val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
if (!this.timer) {
// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
this.screenHeight = val
this.timer = true
let that = this
setTimeout(function () {
// 打印screenWidth变化的值
console.log(that.screenHeight)
that.timer = false
}, 400)
}
}
}
最后别忘了在元素上赋值
<div :style="{ height: screenHeight + 'px' }">
页面内容····
</div>
