码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-08-04 18:18:07      阅读:125      评论:0      收藏:0      [点我收藏+]

标签: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>

 

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

标签:mount   timeout   定时   let   实时   避免   ret   height   const   

原文地址:https://www.cnblogs.com/wuqilang/p/13434823.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!