vue动态监听浏览器窗口高度

HTML:

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

JS:

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';
    }
  }
}

 

posted @ 2019-06-28 11:48  ysx_小鱼  阅读(1696)  评论(0编辑  收藏  举报