动态获取浏览器大小,可以动态调整页面布局,让页面更加灵活。

JS获取浏览器高度:

var width=document.documentElement.clientWidth;
var height=document.documentElement.clientHeight;

//原生JS动态获取浏览器大小改变使用onresize:

window.onresize = function(){
    alert(document.documentElement.clientWidth);
    alert(document.documentElement.clientHeight);
}

Vue组件中动态获取高度,使用如下方式

  data() {
    return {
      windowWidth: document.documentElement.clientWidth, // 实时屏幕宽度
      windowHeight: document.documentElement.clientHeight // 实时屏幕高度
    }
  },
  mounted() {
    // 实时获取浏览器宽度高度
    const that = this
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight
        window.fullWidth = document.documentElement.clientWidth
        that.windowHeight = window.fullHeight // 高
        that.windowWidth = window.fullWidth // 宽
      })()
    }
  },
Logo

前往低代码交流专区

更多推荐