vue如何获取窗口的可视高度

vue获取窗口的可视高度

在 Vue.js 中获取窗口的可视高度（即视口 viewport 的高度），你可以使用原生 JavaScript 的 window.innerHeight 属性。

这个属性返回当前浏览器窗口的内部高度，包括 URL 栏和状态栏等浏览器界面元素的高度。

要在 Vue 组件中使用它，你可以在任何生命周期钩子或方法中调用 window.innerHeight。

例如，在组件挂载时获取可视高度并响应窗口大小的变化：

<template>
  <div>
    <!-- 你的模板代码 -->
    <p>当前窗口可视高度为：{{ viewportHeight }}px</p>
  </div>
</template>

<script>
export default {
data() {
    return {
      viewportHeight: window.innerHeight// 初始设置为当前窗口高度
    };
  },
mounted() {
    this.updateViewportHeight();
    window.addEventListener('resize', this.updateViewportHeight);
  },
beforeDestroy() {
    window.removeEventListener('resize', this.updateViewportHeight);
  },
methods: {
    updateViewportHeight() {
      this.viewportHeight = window.innerHeight;
    }
  }
};
</script>

在这个例子中，我们在组件挂载完成后添加了一个监听器来监听窗口大小的变化，并在窗口大小改变时更新 viewportHeight 数据属性。我们还确保在组件销毁之前移除事件监听器，以避免内存泄漏。

请记得根据你的实际需求调整代码。如果你需要考虑滚动条的存在或者想要排除它，你可能需要使用其他的计算方式，如 document.documentElement.clientHeight，这取决于你的具体应用场景。

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。