vue3动态监听div高度案例

案例场景

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

实践代码案例

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.rhkb.cn/news/465175.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为OD机试真题(Python/JS/C/C++)- 考点 - 细节

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题 点这里。 本专栏收录于《华为OD机试真题&#xff08;Python/JS/C/C&#xff09;》。

Spring源码学习(五):Spring AOP

免责声明 本人还处于学习阶段&#xff0c;如果内容有错误麻烦指出&#xff0c;敬请见谅&#xff01;&#xff01;&#xff01;Demo <dependency><groupId>org.aspectj</groupId><artifactId>aspectjweaver</artifactId><version>1.8.8<…

vue 使用docx-preview 预览替换文档内的特定变量

在开发合同管理中&#xff0c;需要使用到此功能&#xff0c;就是替换合同模板内的一些字符串&#xff0c;如&#xff1a;甲乙方名称&#xff0c;金额日期等&#xff0c;合同内容不变。效果如下&#xff1a; 使用docx-preview 好处是只预览不可编辑内容。 前端vue import { re…

若依项目搭建

若依的大版本 基本环境搭建 搭建注意点

(11)(2.1.6) Hobbywing DroneCAN ESC(二)

文章目录 前言 2 配置ESC 3 测试 4 设置视频 5 参数说明 前言 具有 CAN 接口&#xff08;including these&#xff09;的业余 ESC 支持 DroneCAN&#xff0c;它允许自动驾驶仪通过 CAN 控制 ESC /电机&#xff0c;并检索单个转速、电压、电流和温度。 2 配置ESC 默认情…

JVM结构图

JVM&#xff08;Java虚拟机&#xff09;是Java编程语言的核心组件之一&#xff0c;负责将Java字节码翻译成机器码并执行。JVM由多个子系统组成&#xff0c;包括类加载子系统、运行时数据区、执行引擎、Java本地接口和本地方法库。 类加载子系统&#xff08;Class Loading Subsy…

【智能算法改进】混沌映射策略--一网打尽

摘要 本文研究了多种混沌映射策略在智能算法中的改进效果&#xff0c;提出了一种综合不同混沌映射策略的多元混合方法&#xff0c;以提高算法的全局优化能力和收敛速度。通过引入不同的混沌映射&#xff08;如 Logistic、Tent、Sine 等&#xff09;生成初始种群分布&#xff0…

QML —— QML调用C++两种方法(附完整测试源码)

代码效果 说明 QML 其实是对JavaScript 的扩展,融合了Qt Object 系统,它是一种新的解释型的语言, QML 引擎虽然由Qt C++ 实现,但QML 对象的运行环境,说到底和C++ 对象的上下文环境是不同的,是平行的两个世界。如果你想在QML 中访问C++ 对象,那么必然要找到一种途径来在两…

剧本杀小程序,市场发展下的新机遇

剧本杀作为休闲娱乐的一种游戏方式&#xff0c;在短时间内进入了大众视野中&#xff0c;受到了广泛关注。近几年&#xff0c;剧本杀行业面临着创新挑战&#xff0c;商家需求寻求新的发展机遇&#xff0c;在市场饱和度下降的趋势下&#xff0c;获得市场份额。 随着科技的不断进…

mysql error:1449权限问题 及 用户授权

一、权限问题 Got error: 1449: The user specified as a definer (skip-grants userskip-grants host) does not exist when using LOCK TABLES 在迁移数据库时&#xff0c;定义的definer&#xff0c;在两个数据库之间不同步时&#xff0c;要将不存在的definer改成数据库中已…

Spark 的Standalone集群环境安装与测试

目录 一、Standalone 集群环境安装 &#xff08;一&#xff09;理解 Standalone 集群架构 &#xff08;二&#xff09;Standalone 集群部署 二、打开监控界面 &#xff08;一&#xff09;master监控界面 &#xff08;二&#xff09;日志服务监控界面 三、集群的测试 &a…

基于SpringBoot+Vue实现新零售商城系统

作者主页&#xff1a;编程千纸鹤 作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、多年校企合作经验&#xff0c;被多个学校常年聘为校外企业导师&#xff0c;指导学生毕业设计并参…

SAP RFC 用户安全授权

一、SAP 通讯用户 对于RFC接口的用户&#xff0c;使用五种用户类型之一的“通讯”类型&#xff0c;这种类型的用户没有登陆SAPGUI的权限。 二、对调用的RFC授权 在通讯用户内部&#xff0c;权限对象&#xff1a;S_RFC中&#xff0c;限制进一步可以调用的RFC函数授权&#xff…

【Java Web】搭建Web环境以及初识JSP Tomcat

文章目录 程序架构Web服务器TomcatJSP概述主要特点基本语法综合示例程序调试和排错 代码示例 程序架构 C/S&#xff08;Client/Server&#xff0c;客户端/服务器&#xff09;和 B/S&#xff08;Browser/Server&#xff0c;浏览器/服务器&#xff09;是两种常见的软件系统架构模…

如何建购物网站提升用户体验

在构建一个购物网站时&#xff0c;用户体验是至关重要的&#xff0c;它直接影响到顾客的满意度和转化率。为了提升用户体验&#xff0c;可以从以下几个方面入手。 首先&#xff0c;网站设计应简洁明了。确保导航栏清晰易懂&#xff0c;让用户在寻找商品时不会迷失。此外&#x…

qt QTableView详解

1、概述 QTableView 是 Qt 框架中的一个高级视图类&#xff0c;用于以表格形式展示二维数据。它基于 QAbstractItemView&#xff0c;并与模型&#xff08;通常是 QAbstractTableModel 或 QStandardItemModel&#xff09;结合使用&#xff0c;以实现数据的展示和交互。QTableVi…

Android TextView自动换行文本显示不全解决

某些情况下&#xff0c;TextView自动换行后&#xff0c;会出现每行结尾处显示不全的问题&#xff0c; 如图&#xff1a; 常见解决方案&#xff1a; 设置TextView的“ellipsize”属性为“end” 实测无效&#xff01;将TextView外部的Layout改为RelativeLayout 实测无效&…

Rust 力扣 - 1461. 检查一个字符串是否包含所有长度为 K 的二进制子串

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 长度为k的二进制子串所有取值的集合为[0, sum(k)]&#xff0c;其中sum(k)为1 2 4 … 1 << (k - 1) 我们只需要创建一个长度为sum(k) 1的数组 f &#xff0c;其中下标为 i 的元素用来标记字符串中子串…

typescript的简介

简介 tsc npm install -g typescripttsc -v作用 检查类型和语法错误&#xff0c;提前纠错 ts的类型 如何穿件带有ts的vue工程 作用 常见类型 用法 编写一个ts文件 let username:string "John";let age:number 25;let isUpdated:boolean true;let data:any &q…

一文搞懂:AI网关这个新东西是什么意思?有没有开源免费的选择?

AI网关是什么意思&#xff1f;有什么用&#xff1f; AI网关是企业应用与内外部大模型之间的桥梁&#xff0c;它位于企业应用与内外部大模型的调用交汇点。 AI网关的主要功能 是 将应用请求 通过集中管理模块 转发给 1 内部自建模型、2 外部大模型服务提供商&#xff0c;甚至 …