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)
})
相关推荐
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD4 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding4 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空4 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
01传说5 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
sunbyte7 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
拾光拾趣录9 小时前
虚拟DOM
前端·vue.js·dom
合作小小程序员小小店9 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app