vue 动态获取可视区高度

个人学习笔记

<div class="allposition_qw_content" ref="qwcontent" ></div>
data() {

            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.clientHeigh

          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)

        }

      }

    }