「技术方案」监听字体大小实现页面高度自适应

一、监听DOM元素的API

要监听字体大小并根据其变化调整高度,可以使用以下方法:

1. 使用 ResizeObserver

ResizeObserver 是一个现代浏览器支持的 API,用于监听 DOM 元素的尺寸变化。通过监听字体大小变化(会影响元素高度),可以动态调整高度。

实现代码
attached() {const paragraphInstance = this.ref('paragraph');const paragraphElement = paragraphInstance.el; // 获取 DOM 元素// 创建 ResizeObserver 实例const resizeObserver = new ResizeObserver(() => {const computedStyle = window.getComputedStyle(paragraphElement);const fontSize = parseFloat(computedStyle.fontSize); // 获取字体大小const newHeight = fontSize * 1.5; // 假设高度为字体大小的1.5倍paragraphElement.style.height = `${newHeight}px`; // 动态设置高度console.log('字体大小:', fontSize, '调整后高度:', newHeight);});// 开始观察resizeObserver.observe(paragraphElement);// 在组件销毁时断开观察器(可选)this.resizeObserver = resizeObserver; // 保存以便销毁时使用
},
detached() {// 断开 ResizeObserverthis.resizeObserver?.disconnect();
}

2. 通过 MutationObserver 检测样式变化

如果 ResizeObserver 不满足需求,可以使用 MutationObserver,监测 style 属性变化,从而捕获字体大小的调整。

实现代码
attached() {const paragraphInstance = this.ref('paragraph');const paragraphElement = paragraphInstance.el;const observer = new MutationObserver(() => {const computedStyle = window.getComputedStyle(paragraphElement);const fontSize = parseFloat(computedStyle.fontSize);const newHeight = fontSize * 1.5;paragraphElement.style.height = `${newHeight}px`;console.log('字体大小:', fontSize, '调整后高度:', newHeight);});observer.observe(paragraphElement, {attributes: true, // 监听属性变化attributeFilter: ['style'], // 限定监听的属性});this.mutationObserver = observer;
},
detached() {// 停止监听this.mutationObserver?.disconnect();
}

3. 基于 window.getComputedStyle 的定时轮询(备选方案)

如果对性能要求不高,或者需要兼容不支持上述方法的浏览器,可以定期轮询检查字体大小是否变化。

实现代码
attached() {const paragraphInstance = this.ref('paragraph');const paragraphElement = paragraphInstance.el;this.checkFontSize = setInterval(() => {const computedStyle = window.getComputedStyle(paragraphElement);const fontSize = parseFloat(computedStyle.fontSize);const newHeight = fontSize * 1.5;paragraphElement.style.height = `${newHeight}px`;console.log('字体大小:', fontSize, '调整后高度:', newHeight);}, 500); // 每500ms检查一次
},
detached() {// 清除定时器clearInterval(this.checkFontSize);
}

选择方案

  • 优先使用 ResizeObserver:性能好,专注于尺寸变化。
  • MutationObserver:适合监测样式属性变化,但要限制监听范围,避免性能问题。
  • 轮询:简单易实现,但性能可能较低,仅作为备选方案。

二、实现页面高度随字体变化自适应

以上方法无法实现随着字体变化高度的完美变化,总会存在点问题
所以我们在 this.nextTick() 调用更新高度的方法 updateSwiperHeight

// 父组件
updateHeight() {this.nextTick(() => {this.updateSwiperHeight();});
}// 更新高度的方法
updateSwiperHeight(data = {}) {const isLilac = this.data.get('styleVarient') === 'lilac';// 取row-content的高度给cos-swiper-contentconst rowContentEl = this.ref(`swiperItem_${data.index || 0}`)?.el.querySelector('.cos-row');const swiperEl = this.ref('swiper')?.el.querySelector('.cos-swiper-content');if (!rowContentEl || !swiperEl) {return;}// lilac样式下顶部有15px外间距swiperEl.style.height = `${rowContentEl.clientHeight + (isLilac ? 15 : 0)}px`;
}

三、整合代码

1、在字体所在组件(子组件)监听字体变化

attached() {const paragraphInstance = this.ref('paragraph');const paragraphElement = paragraphInstance.el;// ResizeObserver 监听字体变化后,更新高度const resizeObserver = new ResizeObserver(() => {this.fire('update-height'); // 触发父组件更新});resizeObserver.observe(paragraphElement);
}detached() {this.resizeObserver?.disconnect();
}

2、在swiper高度所在组件(父组件)绑定方法

// 模版部分
<template><div><p>父组件的 swiperHeight:{{ swiperHeight }}</p><child-component swiper-height="{{ swiperHeight }}" on-update-height="updateHeight" /></div>
</template>
// 逻辑部分
updateHeight() {this.nextTick(() => {this.updateSwiperHeight();});
}// 更新高度的方法
updateSwiperHeight(data = {}) {const isLilac = this.data.get('styleVarient') === 'lilac';// 取row-content的高度给cos-swiper-contentconst rowContentEl = this.ref(`swiperItem_${data.index || 0}`)?.el.querySelector('.cos-row');const swiperEl = this.ref('swiper')?.el.querySelector('.cos-swiper-content');if (!rowContentEl || !swiperEl) {return;}// lilac样式下顶部有15px外间距swiperEl.style.height = `${rowContentEl.clientHeight + (isLilac ? 15 : 0)}px`;
}

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

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

相关文章

【PyTorch】Pytorch中torch.nn.Conv1d函数详解

1. 函数定义 torch.nn.Conv1d 是 PyTorch 中用于一维卷积操作的类。定义如下&#xff1a; 官方文档&#xff1a;https://pytorch.ac.cn/docs/stable/generated/torch.nn.Conv1d.html#torch.nn.Conv1d torch.nn.Conv1d(in_channels, out_channels, kernel_size, stride1,paddi…

绿光一字线激光模组:工业制造与科技创新的得力助手

在现代工业制造和科技创新领域&#xff0c;绿光一字线激光模组以其独特的性能和广泛的应用前景&#xff0c;成为了不可或缺的关键设备。这种激光模组能够发射出一条明亮且精确的绿色激光线&#xff0c;具有高精度、高稳定性和长寿命的特点&#xff0c;为各种精密加工和测量需求…

【Linux】【Shell】Shell 基础与变量

Shell 基础 Shell 基础查看可用的 Shell判断当前 Shell 类型 变量环境变量查看环境变量临时环境变量永久环境变量PATH 变量 自定义变量特殊赋值(双引号、单引号、反撇号) 预定义变量bashrc Shell 基础 Shell 是一个用 C 语言编写的程序&#xff0c;相当于是一个翻译&#xff0c…

【SQL50】day 2

目录 1.每位经理的下属员工数量 2.员工的直属部门 3.判断三角形 4.上级经理已离职的公司员工 5.换座位 6.电影评分 7.修复表中的名字 8.患某种疾病的患者 9.删除重复的电子邮箱 1.每位经理的下属员工数量 # Write your MySQL query statement below #e1是经理&#xff0c;…

FIFO和LRU算法实现操作系统中主存管理

FIFO&#xff0c;用数组实现 1和2都是使用nextReplace实现新页面位置的更新 1、不精确时间&#xff1a;用ctime输出运行时间都是0.00秒 #include <iostream> #include <iomanip> #include<ctime>//用于计算时间 using namespace std;// 页访问顺序 int pa…

ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;资源共享平台设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本资源共享平台就是在…

LeetCode 力扣 热题 100道(六)合并两个有序链表(C++)

合并两个有序链表 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4]示例 2&#xff1a; 输入&#xff1a;l1 [], l2 [] 输出&#xff1a;[]示…

ubuntu显示管理器_显示导航栏

ubuntu文件管理器_显示导航栏 一、原始状态&#xff1a; 二、显示导航栏状态&#xff1a; 三、原始状态--->导航栏状态: 1、打开dconf编辑器&#xff0c;直接在搜索栏搜索 dconf-editor ------如果没有安装&#xff0c;直接按流程安装即可。 2、进入目录&#xff1a;org …

高集成的MCU方案已成电机应用趋势?

【哔哥哔特导读】高集成化的芯片成为当下MCU领域研发和市场布局的重点&#xff0c;但是在实际应用中仍然面临散热等痛点问题&#xff0c;MCU厂商是如何解决和优化这些痛点&#xff1f; 随着全球工业自动化、智能制造和绿色发展的不断推进&#xff0c;中国电机行业正站在新一轮…

GitLab|GitLab报错:PG::ConnectionBad: could not connect to server...

错误信息&#xff1a; PG::ConnectionBad: could not connect to server: No such file or directory Is the server running locally and accepting connections on Unix domain socket "/var/opt/gitlab/postgresql/.s.PGSQL.5432"? /opt/gitlab/embedded/service…

2411rust,cargo清理缓存

原文 Cargo最近在晚间通道上取得了一个不稳定的功能(从nightly-2023-11-17开始),它可自动清理Cargo主目录中的缓存内容. 总之,请求使用晚间通道的人启用此功能,并在Cargo问题跟踪器上报告问题.要启用它,请在你的一般在~/.cargo/config.toml或%USERPROFILE%\.cargo\config.tom…

购物街项目TabBar的封装

1.TabBar介绍 在购物街项目中 不论页面如何滚动 始终存在一个TabBar固定在该项目的底部 他在该项目中 扮演者选项卡栏的角色 内部存在若干选项 而选项中 固定存在两部分(图片文本) 其中主要涉及到TabBar/TabBarItem这些和业务无关的共享组件(建议存放于components/common中)、…

优化表单交互:在 el-select 组件中嵌入表格显示选项

介绍了一种通过 el-select 插槽实现表格样式数据展示的方案&#xff0c;可更直观地辅助用户选择。支持列配置、行数据绑定及自定义搜索&#xff0c;简洁高效&#xff0c;适用于复杂选择场景。完整代码见GitHub 仓库。 背景 在进行业务开发选择订单时&#xff0c;如果单纯的根…

最新Kali安装详细版教程(附安装包,傻瓜式安装教程)

本文主要详细介绍 kali 的安装过程&#xff0c;以及安装完成后的基本设置&#xff0c;比如安装增强工具&#xff0c;安装中文输入法以及更新升级等操作。 文章目录 实验环境准备工作步骤说明安装虚拟机安装 Kali安装增强工具安装中文输入法更新升级 实验环境 VMware &#x…

细说STM32单片机DMA中断收发RTC实时时间并改善其鲁棒性的方法

目录 一、DMA基础知识 1、DMA简介 (1)DMA控制器 (2)DMA流 (3)DMA请求 (4)仲裁器 (5)DMA传输属性 2、源地址和目标地址 3、DMA传输模式 4、传输数据量的大小 5、数据宽度 6、地址指针递增 7、DMA工作模式 8、DMA流的优先级别 9、FIFO或直接模式 10、单次传输或突…

H.265流媒体播放器EasyPlayer.js H5流媒体播放器如何验证视频播放是否走硬解

随着技术的不断进步和5G网络的推广&#xff0c;中国流媒体播放器行业市场规模以及未来发展趋势都将持续保持稳定的增长&#xff0c;并将在未来几年迎来新的发展机遇。流媒体播放器将继续作为连接内容创作者和观众的重要桥梁&#xff0c;推动数字媒体产业的创新和发展。 EasyPla…

仿Mybatis代码生成.获取索引信息

获取索引信息 1.核心思路 通过以下sql语句&#xff0c;例如对于user表 show index from user 执行结果如下: 2.实现 连接数据库后执行sql语句&#xff0c;我们重点关注下图标注的三个熟悉 代码如下: PreparedStatement ps null;ResultSet fieldResult null;List<Fiel…

【AI大模型】大型语言模型LLM基础概览:技术原理、发展历程与未来展望

目录 &#x1f354; 大语言模型 (LLM) 背景 &#x1f354; 语言模型 (Language Model, LM) 2.1 基于规则和统计的语言模型&#xff08;N-gram&#xff09; 2.2 神经网络语言模型 2.3 基于Transformer的预训练语言模型 2.4 大语言模型 &#x1f354; 语言模型的评估指标 …

详解八大排序(一)------(插入排序,选择排序,冒泡排序,希尔排序)

文章目录 前言1.插入排序&#xff08;InsertSort&#xff09;1.1 核心思路1.2 实现代码 2.选择排序&#xff08;SelectSort&#xff09;2.1 核心思路2.2 实现代码 3.冒泡排序&#xff08;BubbleSort&#xff09;3.1 核心思路3.2 实现代码 4.希尔排序&#xff08;ShellSort&…

如何在 Ubuntu 上使用 Docker 部署 LibreOffice Online

简介 LibreOffice Online&#xff08;也称为Collabora Online&#xff09;是一个开源的在线办公套件&#xff0c;它提供了与LibreOffice桌面版相似的功能&#xff0c;但完全在云端运行。这意味着用户可以通过浏览器访问和编辑文档&#xff0c;而无需在本地计算机上安装任何软件…