当前位置: 首页 > news >正文

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.lryc.cn/news/236905.html

相关文章:

  • 斐波那契数列,剑指offer,力扣
  • Mac安装CocoaPods
  • APP专项测试方法和工具的使用(测试新手必看)
  • WordPress网站迁移实战经验
  • 3D全景视角,足不出户感知真实场景的魅力
  • C编译环境和预处理(非常详细,建议收藏)
  • LeetCode669. Trim a Binary Search Tree
  • YOLOv8优化策略:轻量级Backbone改进 | VanillaNet极简神经网络模型 | 华为诺亚2023
  • 【数据结构(二)】稀疏 sparsearray 数组(1)
  • MySQL的执行器是怎么工作的
  • 【目标测距】雷达投影测距
  • uniapp、小程序canvas相关
  • [工业自动化-23]:西门子S7-15xxx编程 - 软件编程 - 西门子PLC人机界面交互HMI功能概述、硬件环境准备、软件环境准备
  • 在Ubuntu系统中安装VNC并结合内网穿透实现公网远程访问
  • java基础练习缺少项目?看这篇文章就够了(上)!
  • 鸿蒙为什么使用typescript 作为开发语言 而不是 flutter 或者 kotlin
  • Flutter NestedScrollView 、SliverAppBar全解析,悬浮菜单的应用
  • Mongodb 副本集名称重命名
  • C#WPF属性触发器实例
  • Kotlin 核心语法,为什么选择Kotlin ?
  • SpringCloud微服务:Nacos的集群、负载均衡、环境隔离
  • Selenium+Python做web端自动化测试框架实战
  • Linux:安装MySQL服务(非docker方式)
  • C++实现有理数类 四则运算和输入输出
  • 小鸟飞呀飞
  • Unity 场景烘培 ——unity Post-Processing后处理1(四)
  • Burpsuite抓HTTPS证书导入问题
  • python保存文件到zip压缩包中
  • java发送媒体类型为multipart/form-data的请求
  • 自定义类使用ArrayList中的remove