vue3页面加载完成后如何获取宽度 高度

前言

在Vue3中，获取页面加载完成后的宽度和高度可以通过多种方法实现。在本文中，我将介绍几种常用的方法来获得页面的宽度和高度。

方法一：使用window.innerWidth和window.innerHeight

在Vue3中，可以通过window.innerWidth和window.innerHeight来获取页面的宽度和高度。这两个属性返回的是窗口的内部宽度和高度，包括滚动条的宽度。以下是示例代码：

window.addEventListener('load', () => {
  const width = window.innerWidth;
  const height = window.innerHeight;
  console.log('页面宽度：', width);
  console.log('页面高度：', height);
});

上述代码中，我们使用addEventListener监听load事件，在页面加载完成后执行回调函数。在回调函数中，使用window.innerWidth和window.innerHeight获取页面的宽度和高度，并将其打印到控制台。

方法二：使用document.documentElement.clientWidth和document.documentElement.clientHeight

除了使用window.innerWidth和window.innerHeight，Vue3还可以使用document.documentElement.clientWidth和document.documentElement.clientHeight来获取页面的宽度和高度。这两个属性返回的是视口的宽度和高度，不包括滚动条的宽度。以下是示例代码：

window.addEventListener('load', () => {
  const width = document.documentElement.clientWidth;
  const height = document.documentElement.clientHeight;
  console.log('页面宽度：', width);
  console.log('页面高度：', height);
});

上述代码中，我们仍然使用addEventListener监听load事件，在页面加载完成后执行回调函数。在回调函数中，使用document.documentElement.clientWidth和document.documentElement.clientHeight获取页面的宽度和高度，并将其打印到控制台。

总结

通过以上介绍，我们可以看到在Vue3中获取页面加载完成后的宽度和高度有两种常用的方法：使用window.innerWidth和window.innerHeight或者使用document.documentElement.clientWidth和document.documentElement.clientHeight。根据实际需求选择合适的方法即可。

同时需要注意的是，以上方法是在页面加载完成后获取宽度和高度。如果需要在页面加载过程中动态获取宽度和高度，可以考虑将对应的代码放在mounted生命周期钩子函数或其他合适的位置。