Vue 动态获取可视区高度,Vue监听窗口变化

小灰灰 2023-02-16 04:22 31阅读 0赞

链接：https://www.jianshu.com/p/37c73afb678b

<div class="allposition_qw_content" ref="qwcontent" ></div>
data() 
    return{
        fullHeight: '',//fullHeight: document.documentElement.clientHeight  屏幕高度 默认值
        }
    },
methods: {
        changeFixed(fullHeight){                        //动态修改样式
            this.$refs.qwcontent.style.height =( 0.91*fullHeight - 200)+'px';
        }
    },
mounted() {
      this.fullHeight= `${document.documentElement.clientHeight}`;//默认值
      const that = this
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.fullHeight
        })()
      }
    },
watch: {
      // 如果 `fullHeight ` 发生改变，这个函数就会运行 
      fullHeight :function(val) {
        if(!this.timer) {
          this.fullHeight = val
          this.changeFixed(this.fullHeight)
          console.log(val)
          this.timer = true
          let that = this
          setTimeout(function (){//频繁触发 resize 函数，会导致页面很卡
            that.timer = false
          },100)
        }
      }
  }