vue 获取屏幕高度

// 在 Vue 组件中获取屏幕高度的示例代码

<template>
  <div>
    <!-- 展示屏幕高度 -->
    <p>屏幕高度: {{ screenHeight }}px</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      screenHeight: 0 // 存储屏幕高度
    };
  },
  mounted() {
    // 在组件挂载时获取屏幕高度
    this.getScreenHeight();
    // 监听窗口大小变化，实时更新屏幕高度
    window.addEventListener('resize', this.getScreenHeight);
  },
  beforeDestroy() {
    // 在组件销毁前移除事件监听器
    window.removeEventListener('resize', this.getScreenHeight);
  },
  methods: {
    getScreenHeight() {
      // 获取当前屏幕高度
      this.screenHeight = window.innerHeight;
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明：

1. data(): 定义了一个 screenHeight 变量来存储屏幕的高度。
2. mounted(): 当组件挂载时调用 getScreenHeight 方法来获取屏幕高度，并且添加一个事件监听器，当窗口大小发生变化时重新获取屏幕高度。
3. beforeDestroy(): 在组件销毁之前移除事件监听器，防止内存泄漏。
4. methods: 包含 getScreenHeight 方法，用于获取当前窗口的高度并赋值给 screenHeight。

这样可以确保在页面加载和窗口大小变化时都能正确获取并显示屏幕高度。