标签:mount timeout 定时 let 实时 避免 ret height const
网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
1、data中定义clientHeight变量:
data() { return { clientHeight: document.body.clientHeight } }
2、实时改变clientHeight的值:
mounted() { const that = this window.onresize = () => { return (() => { window.screenHeight = document.body.clientHeight that.clientHeight = window.screenHeight })() } }, watch: { clientHeight(val) { // 为了避免频繁触发resize函数导致页面卡顿,使用定时器 if (!this.timer) { // 一旦监听到的screenWidth值改变,就将其重新赋给data里的screenWidth this.clientHeight = val this.timer = true let that = this setTimeout(function() { // 打印screenWidth变化的值 console.log(that.clientHeight) that.timer = false }, 400) } } }
3、给需要自适应高度的div添加:style属性:
<div class="review-options-details" :style="{ height: clientHeight-194 + ‘px‘ }">
</div>
标签:mount timeout 定时 let 实时 避免 ret height const
原文地址:https://www.cnblogs.com/wuqilang/p/13434823.html