vue3动态监听div高度案例

案例场景

场景描述:现在左边的线条长度需要根据右边盒子的高度进行动态变化

实践代码案例

HTML部分
javascript 复制代码
<div v-for="(device, index) in devices" :key="index">
        <!-- 动态设置 .left-bar 的高度 -->
        <div class="left-bar" :style="{ height: `${contentHeights[index] || 30}px` }"></div>
        <div :ref="(el) => { contentRefs[index] = el as HTMLElement }">
          <span>设备编号:{{ device.code }}</span>
          <span>异常信息:{{ device.info }}</span>
        </div>
</div>
JS部分
javascript 复制代码
import { reactive, toRefs, ref, onMounted, watch, nextTick } from 'vue';

interface Device {
  code: string;
  status: string;
  info: string;
}

const state = reactive({
  devices:[
        {
          code: 'JS23053001',
          status: '异常',
          info: '提升激光仪通讯故障 提升激光仪通讯故障 备用(从站数据故障) 备用(从站数据故障)'
        },
        {
          code: 'JS23053002',
          status: '异常',
          info: '货物左超 过载保护 断绳保护 超速保护 行走超限 升降超限'
        },
        { code: 'JS23053003', status: '正常', info: '正常' },
        { code: 'JS23053003', status: '正常', info: '正常' },
        {
          code: 'JS23053003',
          status: '异常',
          info: '行走变频器通讯故障 行走变频器通讯故障 货叉1变频器通讯故障'
        }
      ],
});

const { devices } = toRefs(state);

// 用于存储每个 content 元素的引用
const contentRefs = ref<(HTMLElement | null)[]>([]);

// 存储每个设备的 .content 元素的高度
const contentHeights = ref<number[]>([]);

// 更新每个设备的 content 高度
const updateContentHeight = () => {
contentHeights.value = contentRefs.value.map(contentRef => {
    // 获取每个 content 元素的高度
    return contentRef ? contentRef.clientHeight : 0;
  });
};

// 监听设备列表变化,重新更新高度
watch(() => state.devices, () => {
  nextTick(() => updateContentHeight()); // 确保 DOM 渲染完成后获取高度
}, { immediate: true });
Style部分(left-bar)
javascript 复制代码
.device-item .left-bar {
  width: 2px;            // 宽度
  margin-right: 0.2rem;  // 距离
}

注意:

  • 使用 nextTick 确保 DOM 渲染完成后再更新 contentHeights。这能保证获取到准确的高度信息
  • 给 .left-bar 设置一个默认高度(例如 30px)来确保它始终可见,即使计算出来的高度是 0 时。你可以调试默认高度,并逐步确保 contentHeights 数组能够正常更新
  • contentRefs 是一个数组,用来存储每个 .content 的引用。由于 v-for 渲染的组件是异步的,可能 contentRefs 没有及时更新,导致没有正确获取到每个 .content 的高度
相关推荐
阳火锅几秒前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
夕水40 分钟前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了43 分钟前
实现一个简单的Vue响应式
前端·vue.js
ac.char1 小时前
Golang读取ZIP压缩包并显示Gin静态html网站
golang·html·gin
每天开心1 小时前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
aklry2 小时前
uniapp三步完成一维码的生成
前端·vue.js
撰卢2 小时前
如何提高网站加载速度速度
前端·javascript·css·html
sophister2 小时前
Flex 布局中容易踩的那些坑,你踩过几个?
前端·css·html
用户26124583401613 小时前
vue学习路线(11.watch对比computed)
前端·vue.js
阑梦清川4 小时前
Java后端项目前端基础Vue(二)
vue.js