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

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)
})
相关推荐
小白菜学前端24 分钟前
Vue 配置代理
前端·javascript·vue.js
m0_zj31 分钟前
63.[前端开发-Vue3]Day05-非父子通信-声明周期-refs-混合-额外补充
前端·javascript·vue.js
双普拉斯2 小时前
Spring WebFlux调用生成式AI提供的stream流式接口,实现返回实时对话
java·vue.js·人工智能·后端·spring
武昌库里写JAVA4 小时前
Java 设计模式在 Spring 框架中的实践:工厂模式与单例模式
java·vue.js·spring boot·sql·学习
千里码aicood4 小时前
springboot+vue心理健康服务小程序(源码+文档+调试+基础修改+答疑)
数据库·vue.js·spring boot
李慕婉学姐4 小时前
【开题答辩过程】以《基于SpringBoot+Vue的扶贫助农平台的设计与实现》为例,不会开题答辩的可以进来看看
vue.js·spring boot·后端
小二·4 小时前
在 VSCode 中运行 Vue.js 项目
ide·vue.js·vscode
初出茅庐的4 小时前
hooks&&状态管理&&业务管理
前端·javascript·vue.js
阿民_armin4 小时前
Canvas 冷暖色分析工具
前端·javascript·vue.js
90后的晨仔5 小时前
Vue 插槽(Slots)全面解析与实战指南
前端·vue.js