vue3动态监听div高度案例

news2024/11/6 13:17:54

案例场景

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

实践代码案例

HTML部分
<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部分
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)
.device-item .left-bar {
  width: 2px;            // 宽度
  margin-right: 0.2rem;  // 距离
}

注意:

  • 使用 nextTick 确保 DOM 渲染完成后再更新 contentHeights。这能保证获取到准确的高度信息
  • 给 .left-bar 设置一个默认高度(例如 30px)来确保它始终可见,即使计算出来的高度是 0 时。你可以调试默认高度,并逐步确保 contentHeights 数组能够正常更新
  • contentRefs 是一个数组,用来存储每个 .content 的引用。由于 v-for 渲染的组件是异步的,可能 contentRefs 没有及时更新,导致没有正确获取到每个 .content 的高度

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2234300.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Docker系列】指定系统平台拉取 openjdk:8 镜像

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

【含文档+源码】基于SpringBoot+Vue的新型吃住玩一体化旅游管理系统的设计与实现

开题报告 本文旨在探讨新型吃住玩一体化旅游管理系统的设计与实现。该系统融合了用户注册与登录、旅游景点管理、旅游攻略发帖、特色旅游路线推荐、附近美食推荐以及酒店客房推荐与预定等多项功能&#xff0c;旨在为游客提供全方位、一体化的旅游服务体验。在系统设计中&#…

B3735 [信息与未来 2018] 圣诞树

题目描述 圣诞树共有 nn 层&#xff0c;从上向下数第 11 层有 11 个星星、第 22 层有 22 个星星、以此类推&#xff0c;排列成下图所示的形状。 星星和星星之间用绳子连接。第 1,2,\cdots, n - 11,2,⋯,n−1 层的每个星星都向下一层最近的两个星星连一段绳子&#xff0c;最后一…

解决 Hypack 安装不能正常运行的引导及微软 VC++ 运行库 VCRedist

解决 Hypack 安装不能正常运行的引导及微软 VC 运行库 VCRedist 前言1、常见 Hypack 安装不能正常运行的错误1.1、无法打开大地测量参数1.2、无法运行硬件设置和组合 2、从 Hypack 2013 开始&#xff0c;程序安装后&#xff0c;在程序目标目录&#xff0c;有支持目录 Support &…

给大模型研究生一些救命建议

这篇写给大模型方向的研一新生&#xff0c;我呆证看完以后能救你们大命 首先我知道大模型算法工程师这个 title 十分诱人&#xff0c;你们现在也被导师说得一腔热血。 但是&#xff0c;大模型它跟七八年前的 CV、NLP 都不太一样&#xff0c;最不一样的点在哪里呢? 就是LLM …

Oracle基础查询

第一章 数据查询 1.1 单表查询 1.1.1 数据准备 找到分享的sql文件&#xff0c;选中文件&#xff0c;右键进行复制&#xff0c;选中以wateruser用户登录的连接&#xff0c;右键粘贴&#xff0c;然后ok确认&#xff0c;就可以将两个sql文件添加到了Datagrip的工程中&#xff0c;打…

解决com.mysql.jdbc.NonRegisteringDriver内存泄漏问题

1. 问题背景 线上出现内存报警&#xff0c;通过dump文件&#xff0c;MAT分析&#xff0c;发现mysql-connector-java 有内存泄漏问题 2.问题分析 然后看大对象列表&#xff0c;NonRegisteringDriver 对象确实占内存比较多&#xff0c;里面村的数据库连接的虚引用占比较多 3.解…

如何优雅处理异常?处理异常的原则

前言 在我们日常工作中&#xff0c;经常会遇到一些异常&#xff0c;比如&#xff1a;NullPointerException、NumberFormatException、ClassCastException等等。 那么问题来了&#xff0c;我们该如何处理异常&#xff0c;让代码变得更优雅呢&#xff1f; 1 不要忽略异常 不知…

华为2288HV2服务器安装BCLinux8U6无法显示完整安装界面的问题处理

本文记录了华为2288HV2服务器安装BCLinux8U6无法显示完整安装界面&#xff0c;在安装过程中配置选择时&#xff0c;右侧安装按钮不可见&#xff0c;导致安装无法继续的问题处理过程。 一、问题现象 华为2288HV2服务器安装BCLinux8U6时无法显示完整的安装界面&#xff0c;问题…

Qt多边形填充/不填充绘制

1 填充多边形绘制形式 void GraphicsPolygonItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) {Q_UNUSED(option);Q_UNUSED(widget);//painter->setPen(pen()); // 设置默认画笔//painter->setBrush(brush()); // 设置默…

Python设计模式探究:单例模式实现及应用解析

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storm…

Linux权限解析:用户、组和权限的协同

​​​​​​​在Linux系统中&#xff0c;权限决定了谁能做什么。本文将指导你如何掌握这些权限&#xff0c;以确保你的系统既安全又高效&#xff01; 目录 1.shell命令及其运行原理 2.Linu权限的概念 (1) 用户 (2) 切换用户命令su (3) 指令提权命令sudo (4) 什么是权限…

java、excel表格合并、指定单元格查找、合并文件夹

#创作灵感# 公司需求 记录工作内容 后端&#xff1a;JAVA、Solon、easyExcel、FastJson2 前端&#xff1a;vue2.js、js、HTML 模式1&#xff1a;合并文件夹 * 现有很多文件夹 想合并全部全部的文件夹的文件到一个文件夹内 * 每个部门发布的表格 合并全部的表格为方便操作 模…

koa项目实战 == 实现注册登录鉴权

一. 项目的初始化 1 npm 初始化 npm init -y生成package.json文件: 记录项目的依赖 2 git 初始化 git init生成’.git’隐藏文件夹, git 的本地仓库 3 创建 ReadMe 文件 二. 搭建项目 1 安装 Koa 框架 npm install koa2 编写最基本的 app 创建src/main.js const Koa…

JAVA基础:单元测试;注解;枚举;网络编程 (学习笔记)

单元测试 操作步骤&#xff1a; a.导包import org.junit; b.三个注解 Test Before After c.点击Test 运行就可以了 用在不需要控制台输入的情境下&#xff1a;javaweb&#xff0c;框架项目&#xff0c;微服务项目 供开发人员自己做测试。 package com.page…

四个TikTok万能爆单选品法,第1个超过75%卖家会用!

做TK想爆单至关键的一步就是选品&#xff01;7分靠选品、3分靠运营&#xff0c;一开始你要把品选错了&#xff0c;再怎么运营都是在浪费时间。接下来分享一些万能选品思路&#xff0c;不管做什么类目的商家都可以参考&#xff01; 一、热卖品榜单选品 这是一种很常见&#xf…

Linux开发工具——make/Makefile

目录 一、什么是makefile&#xff1f; 二、为什么要有makefile&#xff1f; 三、makefile的使用 1.依赖关系与依赖方法 2.伪目标 3.定义变量 4.特殊符号 四、makefile的执行逻辑 一、什么是makefile&#xff1f; Makefile是一种自动化构建工具&#xff0c;make是一条指…

开发中使用UML的流程_01概述

目录 CIM-1:定义业务流程 CIM-2:分析业务流程 ​CIM-3:定义系统范围 ​PIM-1:分析系统流程 PIM-2:分析业务规则 PIM-3:定义静态结构 PIM-4:定义操作和方法 开发中使用UML的流程,主要分为7部分,具体如下: CIM-1:定义业务流程 定义及分析业务流程是为了尽快理…

前端开发模板Pear Admin Layui

目录 基本资料学习笔记04-Pear-Admin-Layui模板运行05-Pear-Admin-Layui-GIT方式代...06-Pear-Admin与Vue对比 & 07-Pear-Admin与Vue对比补充09-Pear-Admin-CRUD练习-数据库表创建12-Pear-Admin-CRUD练习-引入其它依赖 & 13-Pear-Admin-CRUD练习-三层架构以及常见配置 …

[MySQL#10] 索引底层(1) | Page | 页目录

目录 1. 初识索引 2. 认识磁盘 3. MySQL与磁盘交互基本单位 4. 索引的理解 1. 重谈Page 2. 为什么IO交互要用Page 3. 有主键的表插入数据时的排序 4. 单个Page与多个Page 4.1 单个Page 4.2 多个Page 目录 单Page目录 多Page目录 在看本文之前&#xff0c;可以回顾…