vue中模块根据屏幕自适应高度问题

template

<div ref="page"></div>

script

data(){
    return{
        clientHeight:'',
    }
}
mounted(){
    this.clientHeight = `${document.documentElement.clientHeight}`;//获取浏览器可视区域高度
    let that = this;
    window.onresize = function(){
       this.clientHeight =  `${document.documentElement.clientHeight}`;
        if(that.$refs.page){
            that.$refs.page.style.minHeight = clientHeight - 100 + 'px';
        }
    }
}
watch:{
    clientHeight(){     //如果clientHeight 发生改变，这个函数就会运行
       this.changeFixed(this.clientHeight) 
    }
}
methods:{
　　changeFixed(clientHeight){
　　　　if(this.$refs.page){
　　　　　　this.$refs.page.style.minHeight = clientHeight -100 + 'px';
　　　　}
　　}
}

优化

watch: {
  clientHeight(val) {
   if(!this.timer) {
    this.clientHeight= val
    this.timer = true
    let that = this
    setTimeout(function (){
     that.timer = false
    },400)
   }
  }
 }

这里的定时器是为了优化，如果频繁调用window.onresize方法会造成页面卡顿，增加定时器会避免频繁调用window.onresize方法