vue缩放/放大时，实时更新/变换显示高度

别跟老夫聊头发2025-07-11 18:54

vue中，当一个外层div固定高度时候并循环渲染的时候，他内嵌套一个div的情况下，缩放/放大的时候会导致内层div文本超出高度/下层div起始高度不一致，所以要实时监听高度，取循环中最大的高度，进行统一设定。

一.定义ref及div样式

首先要定义内层div的ref,用于监听高度的变化（本文设置boxRefs）。并定义maxBoxHeight变量用于存储高度的最大值。

js 复制代码

<div class="model-recommend-header" ref="boxRefs" :style="{ height: maxBoxHeight > 0 ? `${maxBoxHeight}px` : 'auto' }">

二.方法内处理

1、增加watch监听，当数据变化的时候，重新计算高度

js 复制代码

// 修改watch监听方式
 watch(() => props.modelInfo, (newVal) => {
  if (newVal) {
    // 添加setTimeout确保DOM更新完成
    setTimeout(() => {
      setEqualHeights();
    }, 100);
  }
}, { deep: true, immediate: true });

2、在页面放大/缩小的时候监听重新计算

js 复制代码

// 在窗口大小变化时重新计算
window.addEventListener('resize', () => {
  // 添加延迟确保DOM更新完成
  setTimeout(() => {
    setEqualHeights();
  }, 200);
});

3、定义取最大值的方法，并循环作用到所有循环的div中

js 复制代码

const setEqualHeights = () => {
  nextTick(() => {
    if (boxRefs.value && boxRefs.value.length > 0) {
      // 先重置高度为auto以获取实际高度
      boxRefs.value.forEach(box => {
        box.style.height = 'auto';
      });

      // 获取更新后的高度
      const heights = boxRefs.value.map((box) => box.offsetHeight);
      maxBoxHeight.value = Math.max(...heights);
      console.log('Max height set to:', maxBoxHeight.value);

      // 强制应用最大高度到所有元素
      boxRefs.value.forEach(box => {
        box.style.height = `${maxBoxHeight.value}px`;
      });
    }
  });
}

4、最后在页面销毁的时候注销

js 复制代码

// 组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('resize', setEqualHeights)
})