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 的高度
相关文章:
vue3动态监听div高度案例
案例场景 场景描述:现在左边的线条长度需要根据右边盒子的高度进行动态变化 实践代码案例 HTML部分 <div v-for"(device, index) in devices" :key"index"><!-- 动态设置 .left-bar 的高度 --><div class"left-bar"…...
数据转换 | Matlab基于SP符号递归图(Symbolic recurrence plots)一维数据转二维图像方法
目录 基本介绍程序设计参考资料获取方式 基本介绍 Matlab基于SP符号递归图(Symbolic recurrence plots)一维数据转二维图像方法 符号递归图(Symbolic recurrence plots)是一种一维时间序列转图像的技术,可用于平稳和非平稳数据集;对噪声具有…...
分类算法——逻辑回归 详解
逻辑回归(Logistic Regression)是一种广泛使用的分类算法,特别适用于二分类问题。尽管名字中有“回归”二字,逻辑回归实际上是一种分类方法。下面将从底层原理、数学模型、优化方法以及源代码层面详细解析逻辑回归。 1. 基本原理 …...
只允许指定ip远程连接ssh
我们都会使用securtcrt或者xshell等软件进行远程登录,这样虽然会给我们带来很多便捷,但是同样会存在一定的风险。有很多人专门通过重复的扫描试图破解我们的linux服务器,从而获取免费的“肉鸡”。因此我们可以通过设置hosts.allow和hosts.den…...
Rust 力扣 - 2841. 几乎唯一子数组的最大和
文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们遍历长度为k的窗口,用一个哈希表记录窗口内的所有元素(用来对窗口内元素去重),我们取哈希表中元素数量大于等于m的窗口总和的最大值 题解代码 use std::coll…...
TwinCL: A Twin Graph Contrastive Learning Model for Collaborative Filtering
TwinCL: A Twin Graph Contrastive Learning Model for Collaborative Filtering 摘要 在推荐和协同过滤领域,图对比学习(Graph Contrasive Learning,GCL)已经成为一种有影响的方法。然而,对比学习有效性的原因还没有…...
如何区分实例化网格中的每个实例
1)如何区分实例化网格中的每个实例 2)项目在模拟器上切换程序后有概率画面冻结 3)Unity工程导入团结引擎,GUID会变化,导致引用关系丢失 4)Mask在Android平台下渲染异常 这是第407篇UWA技术知识分享的推送&a…...
理解 WordPress | 第一篇:与内容管理系统的关系
初步了解 WordPress 在互联网世界里,WordPress 是一个家喻户晓的名字。它是一个开源的内容管理系统(Content Management System,简称 CMS),帮助用户轻松创建和管理网站。WordPress 诞生于 2003 年,最初是一…...
Python游戏脚本之实现飞机大战(附源码)
一.游戏设定 游戏界面如下图所示: 游戏的基本设定: 敌方共有大中小3款飞机,分为高中低三种速度; 子弹的射程并非全屏,而大概是屏幕长度的80%; 消灭小飞机需要1发子弹,中飞机需要8发,大飞机需要20发子弹; 每消灭一架小飞机得1000分,中飞机6000分,大飞…...
使用Spring Boot搭建简单的web服务
1 引言 1.1 Spring Boot简介 Spring Boot是由Pivotal团队提供的一套开源框架,旨在简化Spring应用的创建及部署。 一、核心设计思想 Spring Boot的核心设计思想是“约定优于配置”(Convention Over Configuration,简称COC)。这…...
【IF-MMIN】利用模态不变性特征进行缺失模态的鲁棒多模态情感识别
代码地址:github地址传送 文章是基于MMIN的改进 -> MMIN传送 abstract 多模态情感识别利用跨模态的互补信息来获得性能。然而,我们不能保证所有模式的数据总是存在于实践中。在跨模态数据缺失预测研究中,异质性模态之间的固有差异即模态…...
RGB图像,排列方式NHWC适合CPU计算,NCHW适合GPU计算
之前写过笔记OpenCV读取图像时按照BGR的顺序HWC排列,PyTorch按照RGB的顺序CHW排列,HWC格式排列,那么内存位置计算公式是? 在比较NHWC(channels_last)和NCHW(channels_first)这两种图像数据通道格式的效率时…...
布朗运动
内容来源 数理金融初步(原书第3版)Sheldon M. Ross著 冉启康译 机械工业出版社 布朗运动 定义 如果随机变量集合 X ( t ) X(t) X(t) 满足以下条件 X ( 0 ) X(0) X(0) 是一个给定的常数 对所有正数 y y y 和 t t t,随机变量 X ( y t …...
WPF+MVVM案例实战(二十二)- 制作一个侧边弹窗栏(CD类)
文章目录 1、案例效果1、侧边栏分类2、CD类侧边弹窗实现1、样式代码实现2、功能代码实现3 运行效果4、源代码获取1、案例效果 1、侧边栏分类 A类 :左侧弹出侧边栏B类 :右侧弹出侧边栏C类 :顶部弹出侧边栏D类 :底部弹出侧边栏2、CD类侧边弹窗实现 1、样式代码实现 在原有的…...
集成旺店通旗舰版售后单至MySQL数据库
旺店通旗舰版-售后单集成到MySQL的技术实现 在数据驱动的业务环境中,如何高效、准确地将旺店通旗舰奇门的数据集成到MySQL数据库,是许多企业面临的重要挑战。本文将分享一个具体的系统对接案例:旺店通旗舰版-售后单-->BI泰海-售后订单表(…...
【Linux】从零开始使用多路转接IO --- epoll
当你偶尔发现语言变得无力时, 不妨安静下来, 让沉默替你发声。 --- 里则林 --- 从零开始认识多路转接 1 epoll的作用和定位2 epoll 的接口3 epoll工作原理4 实现epollserverV1 1 epoll的作用和定位 之前提过的多路转接方案select和poll 都有致命缺点…...
爬虫学习4
from threading import Thread#创建任务 def func(name):for i in range(100):print(name,i)if __name__ __main__:#创建线程t1 Thread(targetfunc,args("1"))t2 Thread(targetfunc, args("2"))t1.start()t2.start()print("我是诛仙剑")from …...
CTF之web题集详情随手笔记
《Web安全》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484238&idx1&snca66551c31e37b8d726f151265fc9211&chksmc0e47a12f793f3049fefde6e9ebe9ec4e2c7626b8594511bd314783719c216bd9929962a71e6&scene21#wechat_redirect 1 WEB 1 靶场目…...
TDengine 集群能力:超越 InfluxDB 的水平扩展与开源优势
随着物联网、车联网等领域的快速发展,企业所面临的数据采集量呈爆炸式增长,这对 IT 基础设施和数据库提出了严峻挑战。传统单机版数据库逐渐无法应对高并发的数据写入和复杂的查询需求。因此,底层数据库必须具备水平扩展能力,以确…...
MATCH_DIRECT_BOOT_AWARE和MATCH_DIRECT_BOOT_UNAWARE
PackageManager.MATCH_DIRECT_BOOT_AWARE和PackageManager.MATCH_DIRECT_BOOT_UNAWARE 在Android系统中,PackageManager类提供了一些标志位,用于控制查询系统中的应用和组件时的行为。其中,MATCH_DIRECT_BOOT_AWARE和MATCH_DIRECT_BOOT_UNAWA…...
手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件: 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...
8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣(LeetCode) 思路 使用两个栈:一个存储重复次数,一个存储字符串 遍历输入字符串: 数字处理:遇到数字时,累积计算重复次数左括号处理:保存当前状态&a…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
逻辑回归暴力训练预测金融欺诈
简述 「使用逻辑回归暴力预测金融欺诈,并不断增加特征维度持续测试」的做法,体现了一种逐步建模与迭代验证的实验思路,在金融欺诈检测中非常有价值,本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...
