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)
})