zoukankan      html  css  js  c++  java
  • 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';
        }
      }
    }
  • 相关阅读:
    css定位
    题解 P2345 【奶牛集会】
    浅谈主席树
    浅谈Manacher算法
    CSP2019 游记
    P5025 [SNOI2017]炸弹
    浅谈2-SAT
    DAY 5模拟赛
    DAY 3
    Luogu P2915 [USACO08NOV]奶牛混合起来
  • 原文地址:https://www.cnblogs.com/ysx215/p/11101889.html
Copyright © 2011-2022 走看看