动态获取设置当前页面指定区域所占高度

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情

使用场景：在大部分后台管理系统布局时，基本都是高中低布局，顶部是form搜索表单，下面是table内容区域，而form内容的不同导致form区域高度有所不同，在不加载外部滚动条的前提下，页面留给table的有效高度将随之改变。

table的高度一般等于 当前页面的总高-除去table外的其他区域的动态高度

实现思路如下： 1、给需要获取动态高度的dom挂载ref属性，通过this.$refs[item].offsetHeight获取对应区域的高度。再循环累加这些区域的高度即可得到页面所有需要减去的区域的总高度。 2、获取当前页面的总高度： let totalHeight= parseInt(window.innerHeight) || parseInt(document.documentElement.clientHeight) || parseInt(document.body.clientHEight) 3、table区域的高度将等于 totalHeight - refs对应的高度

其中涉及到的其他知识点有：

注意： ref挂载在普通dom上和组件上的区别

他们的返回对象是不一样的 当挂载在普通dom上，返回当前dom对象

当挂载在组件 console.log(this.$el); //this.$el === 原生js中document.getElementById("app2")

相关代码如下所示：

  import debounce from 'lodash/debounce';
  export const myMixins={
    data(){
      return {
        tableHeight: 0,
        routeType:'',
      }
    },
    mounted() {
      // 初始化给table高度赋值  给确认的标签一个 ref="tableContainer"就可以获取确认的标签高度，然后就行高度确认
      //需要给多个ref的时候   可以使用包含   tableContainer 的字符串  //例如tableContainer1  、 tableContainer2
      //遇到v-if 需要自己去删除高度
      this.getHeight();
      // 屏幕resize监听方法
      this.screenMonitor();
      this.routeType =localStorage.getItem('routeType') || ''
    },
    methods:{
      getClientInfo() {
        return parseInt(window.innerHeight) || parseInt(document.documentElement.clientHeight) || parseInt(document.body.clientHEight);
      },
      getDynamicHeight(refHeight) {
        let  height = 0
        // 获取到的实时屏幕高度 - 页面中固定的元素高度
        // console.log('this.getClientInfo()==', this.getClientInfo())
        if(this.routeType == 'consumer'){
          height = parseInt(this.getClientInfo()) - parseInt(refHeight) - 64;
        }else{
          height = parseInt(this.getClientInfo()) - parseInt(refHeight) - 180;
        }
        return {
          height
        };
      },
      screenMonitor() {
        let resize = debounce(() => {
          this.getHeight();
        }, 100);
        // 屏幕resize监听事件：一旦屏幕宽高发生变化，就会执行resize
        window.addEventListener("resize", resize, true);
        this.$once("hook:beforeDestroy", () => {
          window.removeEventListener("resize", resize, true);
        });
      },

      getHeight() {
        setTimeout(() => {
          let refList = Object.keys(this.$refs)
          let refHeight = 0
          // console.log('this.$refs[item].offsetHeight==',refList, this.$refs)
          refList.forEach(item => {
            if(this.$refs[item] && this.$refs[item].offsetHeight && item.indexOf("tableContainer") != -1){
              // console.log(333, this.$refs[item].offsetHeight)
              refHeight += this.$refs[item].offsetHeight
            }
            if(this.$refs[item] && !this.$refs[item].offsetHeight && item.indexOf("tableContainer") != -1){
              // console.log(333, this.$refs[item].$el.offsetHeight)
              refHeight += this.$refs[item].$el.offsetHeight
            }
          })
          this.tableHeight = this.getDynamicHeight(refHeight).height;
        }, 0);
      },
    }
  }