vue 获取页面高度

// 在 Vue 组件中获取页面高度的示例代码

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      windowHeight: 0, // 用于存储页面高度
    };
  },
  mounted() {
    this.getWindowHeight();
    window.addEventListener('resize', this.getWindowHeight); // 监听窗口大小变化
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.getWindowHeight); // 移除监听器
  },
  methods: {
    getWindowHeight() {
      this.windowHeight = window.innerHeight; // 获取当前窗口的高度
      console.log('当前窗口高度:', this.windowHeight);
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

解释说明：

1. data：定义了一个 windowHeight 变量，用于存储页面的高度。
2. mounted：在组件挂载时调用 getWindowHeight 方法获取初始窗口高度，并且添加了对窗口大小变化的监听器。
3. beforeDestroy：在组件销毁前移除窗口大小变化的监听器，防止内存泄漏。
4. methods：定义了 getWindowHeight 方法，通过 window.innerHeight 获取当前窗口的高度，并将其赋值给 windowHeight。

这样你就可以在 Vue 组件中动态获取并响应窗口高度的变化。