o2o有哪些电商平台_响应式网页设计针对的终端有哪些_建网站模板_郑州网络营销策划

在当今的Web开发中，页面自适应不同设备的屏幕尺寸是一个至关重要的需求。Vue.js，作为一个流行的前端框架，提供了强大的响应式系统，使得开发者可以轻松地实现这一功能。本文将深入探讨如何使用Vue.js来实时监听浏览器窗口尺寸的变化，并根据这些变化动态调整页面布局。

~script:

const windowWidth = ref(0);
const windowHeight = ref(0);
const tableOuter = ref();const updateWindowSize = () => {windowWidth.value = window.innerWidth;windowHeight.value = window.innerHeight;page.pageSize =windowWidth.value > 1200? Math.floor((windowHeight.value -(isMobile ? 0 : tableOuter?.value.getBoundingClientRect().top) -110) /33): 10;await getList();//获取你的列表
};onMounted(async () => {updateWindowSize();window.addEventListener("resize", updateWindowSize);//如果需要实时监听窗口的变化调整列表，就加上await getList();//获取你的列表
});//如果需要实时监听窗口的变化调整列表，就加上如下代码
onActivated(async () => {await getList();window.addEventListener("resize", updateWindowSize);
});onDeactivated(() => {window.removeEventListener("resize", updateWindowSize);
});

~template

<template><div ref="tableOuter"><el-table :data="list":height="autoHeight"size="small"></el-table></div>
<template>