vue页面自适应屏幕宽高_vue组件页面高度根据屏幕大小自适应

网页可见区域宽：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 (() => {

window.screenHeight = document.body.clientHeight

that.screenHeight = window.screenHeight

})()

}

}

第三步: 监听screenWidth属性值的变化，打印并观察screenWidth发生变化的值

watch: {

screenHeight (val) {

// 为了避免频繁触发resize函数导致页面卡顿，使用定时器

if (!this.timer) {

// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth