浏览器页面监听高度变化，改变视图高度window.onresize()浏览器页面监听高度变化

80 阅读 0 评论 53 点赞

我是靠谱客的博主紧张香水，最近开发中收集的这篇文章主要介绍浏览器页面监听高度变化，改变视图高度window.onresize()浏览器页面监听高度变化，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

浏览器页面监听高度变化window.onresize

浏览器页面监听高度变化

浏览器页面监听高度变化

在这里插入图片描述

作为一个程序员，在进行代码调试时，经常需要用到浏览器的控制台，这样就导致浏览器可见视图高度发生变化，当高度发生变化时，页面渲染的区域也会发生变化。

具体实现代码如下：

<script>
window.onresize = ()=>{
	vm.screenHeight = `${document.documentElement.clientHeight}` - 180;
}
var vm = new Vue({
	el: "#move",
    data: {
        screenHeight: `${document.documentElement.clientHeight}` - 180
    }
})
</script>
// 页面渲染table时
<el-table v-bind:data="ReceiptData.Items"
   v-loading="loading"
   element-loading-text="拼命加载中"
   stripe
   :height="screenHeight"
   style="width: 100%;"></el-table>