vue中控件自适应窗口大小

在实际业务中，常常会遇到需要控制某控件自适应窗口大小的功能

一开始，我都是获取其他控件的大小和窗口的大小来相减获取想要的高度或宽度，但是这样比较繁琐，而且也不一定准确

直接上干货

现在的方案：

1. 封装控制控件高度的函数
    /**
     * 刷新表格高度
     */
    refreshTableHeight () {
      this.$nextTick(() => {
        if (this.table.$el === null) {
          this.table.$el = this.$refs.xTable.$el
        }
        this.table.height = window.innerHeight - this.table.$el.offsetTop - 10
      })
    },
2. 在created里面添加页面的监听函数，用来匹配适应页面的拉伸
    window.addEventListener('resize', () => {
      this.refreshTableHeight() // 这边是对刷新自己想要控件高度的方法
    })
3. 在mounted中调用刷新控件高度方法
4. 如果有其他操作会影响到该控件的高度，需要同步调用刷新控件高度的方法

解释一下：

1. 这边为什么刷新控件高度需要用nextTick函数包裹？

   如果不使用nextTick，在页面首次加载mounted中调用刷新高度，是不会获取到正确的offsetTop，有的人说这边可不可以用setTimeout去等待DOM渲染完成，这种方案会有很大缺陷，因为无法控制DOM渲染完成具体时间，还会带来很大的时间成本，而且时间控制不好还是有缺陷

2. 为什么使用offsettop

   因为控件是在某一个页面中直接使用，我想要的效果是目标页面（窗口）中，尽量不要出现竖向的滚动条（影响操作体验），看个人具体业务。

解释一下：

this.$nextTick 将回调延迟到下次DOM更新循环之后执行