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 的高度
相关推荐
_233320 小时前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·vue.js
浪裡遊21 小时前
MUI组件库与主题系统全面指南
开发语言·前端·javascript·vue.js·react.js·前端框架·node.js
CoderYanger1 天前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
CodeCraft Studio1 天前
国产化PDF处理控件Spire.PDF教程:如何在 C# 中从 HTML 和 PDF 模板生成 PDF
pdf·c#·html·.net·spire.pdf·pdf文档开发·html创建模板pdf
muyouking111 天前
深入理解 HTML `<label>` 的 `for` 属性:提升表单可访问性与用户体验
前端·html·ux
软件技术NINI1 天前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI1 天前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
梵得儿SHI1 天前
Vue 开发环境搭建全指南:从工具准备到项目启动
前端·javascript·vue.js·node.js·pnpm·vue开发环境·nvm版本管理
peachSoda71 天前
自定义配置小程序tabbar逻辑思路
javascript·vue.js·微信小程序·小程序
我有一棵树1 天前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex