vue 检测可视区域大小及是否改变

表格height:'auto'，如果是只有一个vxe-grid还好(容器是固定高度。)，会自动伸展高度，但是多个展示的时候，比如左侧列表，右侧显示一个流程。

这样height:'auto'，发现不太好使。

这样就要计算可视区域高度，并进行动态处理。

  

const areaHeight = ref(0);

 

onMounted(() => {
    areaHeight.value = document.documentElement.clientHeight - 100;
    window.onresize = () => {
      return (() => {
        areaHeight.value = document.documentElement.clientHeight - 100;
      })();
    };
  });

这样就可以得到高度，并根据实际情况进行增减一个值即可。

 

引用：

<div :style="{ height: `${areaHeight}px` }">
...
</div>