链接: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)
        }
      }
  }

 

Logo

前往低代码交流专区

更多推荐