动态高度的大小调整

发表于 更新于 分类于 ， 阅读次数： Waline： 阅读次数： 
<template>
  <div>
    <!-- 在页面上展示计算后的窗口高度 -->
    <p>当前窗口高度: {{ adjustedWindowHeight }}</p>
  </div>
</template>

<script setup>
/*
  引入 Vue 的组合式 API：
  - ref: 定义响应式变量
  - onMounted: 组件挂载后执行回调
  - onBeforeUnmount: 组件卸载前执行回调
  - computed: 定义计算属性
*/
import { ref, onMounted, onBeforeUnmount, computed } from 'vue';

// 定义一个响应式变量 originalWindowHeight，初始值是当前窗口高度
const originalWindowHeight = ref(window.innerHeight);

// 定义一个函数，用于在窗口大小改变时更新窗口高度
const handleResize = () => {
  originalWindowHeight.value = window.innerHeight;
};

// 在组件挂载完成后，给 window 添加 resize 事件监听器
onMounted(() => {
  window.addEventListener('resize', handleResize);
});

// 在组件卸载前，移除监听器，避免内存泄漏
onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});

// 定义一个计算属性：在 originalWindowHeight 的基础上减去 380
// 注意：这个 380 可能是为了预留固定区域的高度（比如底部导航栏、头部工具栏等）
const adjustedWindowHeight = computed(() => {
  return originalWindowHeight.value - 380;
});
</script>