Vue3自适应布局实战:动态窗口高度适配与最小值限制的完美结合

副标题:从基础原理到el-table深度应用,手把手教你实现"屏幕无界,布局有度"的响应式方案


一、核心知识点梳理
  1. 响应式窗口高度监听
    • 使用ref创建响应式变量windowHeight,通过window.addEventListener('resize')实时更新窗口高度
    • 示例代码:

    const windowHeight = ref(window.innerHeight);  
    window.addEventListener('resize', () => {
         
          
            
      windowHeight.value = window.innerHeight;  
    });  
    
  2. 动态高度计算与最小值限制
    • 通过computed属性计算元素高度,结合if条件判断设置最小高度(如360px)
    • 示例代码:

    const tHeight = computed(() => {
         
          
            
      let h = windowHeight.value - 190;  
      let minH = 360;  
      return h < minH ? minH : h;