ResizeObserver观察元素宽度的变化

ResizeObserver观察元素宽度的变化

  • ResizeObserver观察元素宽度的变化

ResizeObserver观察元素宽度的变化

ResizeObserver 构造函数创建一个新的 ResizeObserver 对象,它可以用于监听 Element 内容盒或边框盒或者 SVGElement 边界尺寸的大小。查看详细说明

案例

<template><div><!-- 点击按钮控制显示隐藏 --><el-button @click="clickMe">clickMe</el-button><div class="container"><!-- 被观察的盒子 --><div class="box" ref="boxRef"></div><!-- 根据isShow控制显示隐藏的内容 --><div class="detail" v-if="isShow">Lorem ipsum dolor sit amet.</div></div></div>
</template><script>
export default {data() {return {isShow: false,resizeObserver: null // 初始化 ResizeObserver 实例};},mounted() {const box = this.$refs.boxRef; // 获取盒子元素的引用// 创建 ResizeObserver 实例this.resizeObserver = new ResizeObserver(entries => {for (let entry of entries) {if (entry.target === box) {console.log('盒子宽度变化为:', entry.contentRect.width);// 在这里做相应的操作,比如更新数据或者执行其他逻辑}}});this.resizeObserver.observe(box); // 开始观察盒子元素的变化},beforeDestroy() {// 在组件销毁前断开 ResizeObserver 的观察if (this.resizeObserver) {this.resizeObserver.disconnect();}},methods: {clickMe() {this.isShow = !this.isShow; // 控制显示隐藏的方法}}
};
</script><style lang="scss">
.container {display: flex;.box {width: 100%;height: 100px;border: 1px solid #000;}.detail {width: 300px;height: 100px;border: 1px solid red;}
}
</style>

结果
在这里插入图片描述

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

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

相关文章

小白也能看懂的国内外 AI 芯片概述

随着越来越多的企业将人工智能应用于其产品&#xff0c;AI芯片需求快速增长&#xff0c;市场规模增长显著。因此&#xff0c;本文主要针对目前市场上的AI芯片厂商及其产品进行简要概述。 简介 AI芯片也被称为AI加速器或计算卡&#xff0c;从广义上讲只要能够运行人工智能算法…

面试题-7

1.v-if和v-show的区别&#xff1f; 都可以控制元素的显示和隐藏 1.v-show是控制元素的display值来让元素显示和隐藏,v-if显示隐藏时把DOM元素整个添加和删除 2.v-if有一个局部编译/卸载的过程,切换这个过程中会适当的销毁和重建内部的事件监听和子组件&#xff1b; v-show只…

SpringCloud实用篇02

SpringCloud实用篇02 0.学习目标 1.Nacos配置管理 Nacos除了可以做注册中心&#xff0c;同样可以做配置管理来使用。 1.1.统一配置管理 当微服务部署的实例越来越多&#xff0c;达到数十、数百时&#xff0c;逐个修改微服务配置就会让人抓狂&#xff0c;而且很容易出错。我…

8Base集团通过SmokeLoader部署新的Phobos勒索软件变种

最近&#xff0c;8Base集团的威胁行为者通过Phobos勒索软件的变种展开了一系列金融动机的攻击。这一发现来自于思科Talos的研究结果&#xff0c;他们记录了网络犯罪分子活动的增加。 安全研究员Guilherme Venere在周五发表的详尽的两部分分析中表示&#xff1a;“该组织的大多…

html2canvas快速使用

一、概述 html2canvas是一个HTML渲染器&#xff0c;是一个脚本&#xff0c;它允许你直接在用户浏览器截取页面或部分网页的“屏幕截屏”。底层是基于DOM的&#xff0c;根据页面上可用的信息构建屏幕截图&#xff0c;它没有制作实际的屏幕截图&#xff0c;因此生成的图片并不一定…

速锐得解码匹配驾培驾考吉利几何E萤火虫数据应用智能评判系统

随着国内新能源车的不断发展和渗透&#xff0c;在驾培驾考领域通过新能源车进入到驾驶员培训领域的车型越来越多&#xff0c;这里边包括了特斯拉、宝马、通用、沃尔沃、岚图、江淮、蔚来、比亚迪、吉利、奇瑞、大众等多家车企的车型。 之前我们做过像奇瑞艾瑞泽、江淮IEV7、大…

中国毫米波雷达产业分析0——序言

当前&#xff0c;中国物联网产业发展正处于跨界融合、加速创新和深度调整的历史时期&#xff0c;传感器作为物联网感知层的核心部件&#xff0c; 是“感知世界”之基&#xff0c;也是“万物互联”之本&#xff0c;对支撑构建物联网产业体系具有重要意义。 毫米波雷达作为一种工…

电力工作记录仪、智能安全帽、智能布控球助力智能电网建设

电力行业的建设和发展是国家经济发展的重要支撑&#xff0c;而智能电网作为电力系统的重要组成部分&#xff0c;它的安全高效运行关乎到整个电力系统乃至民生的稳定和安全。为了加快国家经济的发展以及满足人们对电力的需求和用电可靠性的要求&#xff0c;国家早在十二规划中就…

leetcode:914. 卡牌分组(python3解法)

难度&#xff1a;简单 给定一副牌&#xff0c;每张牌上都写着一个整数。 此时&#xff0c;你需要选定一个数字 X&#xff0c;使我们可以将整副牌按下述规则分成 1 组或更多组&#xff1a; 每组都有 X 张牌。组内所有的牌上都写着相同的整数。 仅当你可选的 X > 2 时返回 tru…

环境配置|GitHub——如何在github上搭建自己写的网站

下面简单地总结了从本地的网页文件到在github服务器上展示出来即可以通过网络端打开的过程&#xff1a; &#xff08;以下可能会出现一些难点&#xff0c;照着做就可以了&#xff0c;由于笔者是小白&#xff0c;也不清楚具体原理是什么&#xff0c;希望有一天成为大神的时候能轻…

常见的http响应状态码(详细)

Http响应状态码 HTTP状态码说明 1xx&#xff08;临时响应&#xff09; 表示临时响应并需要请求者继续执行操作的状态代码。 100&#xff1a; &#xff08;继续&#xff09; 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分&#xff0c;正在等待其余部分…

C#使用DateTime获取日期和时间

在C#中&#xff0c;DateTime类是用来处理日期和时间的类。它具有许多属性和方法&#xff0c;用于操作和获取日期和时间的不同部分。以下是DateTime类的一些常用属性和方法。 属性&#xff1a; 1、DateTime.Now&#xff1a;获取当前日期和时间。 DateTime currentDateTime D…

听GPT 讲Rust源代码--src/librustdoc(2)

题图来自 Chromium项目将支持Rust编程语言[1] File: rust/src/librustdoc/html/render/search_index.rs 在Rust源代码中&#xff0c;rust/src/librustdoc/html/render/search_index.rs文件的作用是生成搜索索引&#xff0c;用于在Rust文档页面上进行关键字搜索。该文件实现了一…

【音视频-FFMPEG相关命令使用】

FFMPEG相关命令整理 视频格式转换 # ffmpeg -i srcVideo.format destVideo.format ffmpeg -i test.wmv test.mp4参考&#xff1a; ffmpeg wmv 转MP4 命令

战备器材管理系统-部队物资仓库管理系统

一、项目背景 传统的战备物资管理&#xff0c;一般依赖于一个非自动化的、以纸张文件为基础的系统来记录、追踪进出的货物&#xff0c;完全由人工实施仓库内部的管理&#xff0c;因此仓库管理的效率极其低下。对此&#xff0c;我们运用无线射频技术(RFID)的仓库智能管理系统&am…

qcow2、raw、vmdk等镜像格式工具

如果没有qemu&#xff0c;可以从这里下载安装&#xff1a;https://qemu.weilnetz.de/w64/

7、信息打点——资产泄露CMS识别Git监控SVNDS_Store备份

知识点&#xff1a; CMS指纹识别、源码获取方式习惯&配置&特征等获取方式托管资产平台资源搜索监控 如何获取源码 直接识别CMS&#xff0c;根据CMS获取网站源码。CMS直接识别工具&#xff1a;云悉指纹识别平台。识别不了CMS&#xff0c;则通过以下方式获取源码&…

DSP介绍及CCS

文章目录 CCS版本编译器CCS使用注意严禁中文 CCS的基本操作新建工程导入现有工程调整字体的大小工程界面恢复标签的使用 仿真盒小虫子进入在线Debug 芯片TMS320F28355基本介绍特性 DSP中特殊指令dsp指令中的EALLOW EDIS CCS TI官网 版本 CCS版本&#xff1a; CCS8.3.1.0004_…

〖大前端 - 基础入门三大核心之JS篇㊵〗- DOM事件监听及onxxx的使用

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;不渴望力量的哈士奇(哈哥)&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…

多目标应用:基于非支配排序的鲸鱼优化算法NSWOA求解微电网多目标优化调度(MATLAB代码)

一、微网系统运行优化模型 微电网优化模型介绍&#xff1a; 微电网多目标优化调度模型简介_IT猿手的博客-CSDN博客 二、基于非支配排序的鲸鱼优化算法NSWOA 基于非支配排序的鲸鱼优化算法NSWOA简介&#xff1a; 三、基于非支配排序的鲸鱼优化算法NSWOA求解微电网多目标优化…