element-resize-detector监听普通元素的实现示例
更新时间：2024年07月01日 10:06:36 作者：库库的写代码
当涉及到网页元素的实时尺寸变化监测时,element-resize-detector 是一个值得推荐的开源库,本文主要介绍了element-resize-detector监听普通元素的实现示例,感兴趣的可以了解一下
说明：在进行后台系统开发时，经常会用到一些图表展示，当改变浏览大小后，这些图表本身是没有响应式的，可以借助第三方插件element-resize-detector来监听窗口的变化
一、element-resize-detector 安装
当涉及到网页元素的实时尺寸变化监测时，element-resize-detector 是一个值得推荐的开源库。它能以惊人的速度实现跨浏览器的元素大小调整监听，比传统方法快了约37倍。让我们深入了解这个神器。
npm install element-resize-detector
element-resize-detector 使用了两种不同的监听策略：
- 对象方式：修改元素CSS属性使其触发布局更新，从而捕获尺寸变化。
- 滚动方式（默认）：通过在元素内部创建滚动区域并监听滚动事件，达到无闪烁、高性能的监控效果。
该库在处理性能和兼容性方面做了大量工作，包括：
- 对于静态定位（position: static）的元素，会自动转换为相对定位。
- 添加隐藏元素作为内部监听器，以确保在所有浏览器中的稳定运行。
二、插件使用
1.插件引入
import elementResizeDetectorMaker from "element-resize-detector";
2.创建实例对象
let erd = elementResizeDetectorMaker();
//如果有快速滚动,如果没有不需要进行如下配置
let erdUltraFast = elementResizeDetectorMaker({
strategy: "scroll"
});
3.监听元素
erd.listenTo(
document.getElementById("endlistenEartagEchart"), //第一个参数是要监听的dom
function (element) {
setTimeout(() => {
// that.chartBoxW =
// document.getElementById("endlistenEartagEchart").offsetWidth - 30;
// that.setEchart();
}, 0);
} //第二个参数回调 执行dom变化执行的方法
);到此这篇关于element-resize-detector监听普通元素的实现示例的文章就介绍到这了,更多相关element-resize-detector监听普通元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了vue如何重置data、组件中的data为什么是一个函数、为什么new Vue里的data可以是一个对象，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本文主要介绍了Element的穿梭框数据量大时点击全选卡顿的解决方案，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
vue-cli history模式实现tomcat部署报404的解决方式
这篇文章主要介绍了vue-cli history模式实现tomcat部署报404的解决方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了基于Vue实现微信小程序的图文编辑器,由于微信小程序不能使用常规的图文编辑器(比如百度的UEditor )编辑新闻内容之类的，所以用vue写了个针对小程序用的图文编辑器需要的朋友可以参考下2018-07-07
这篇文章主要为大家详细介绍了用Vue制作的简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要介绍了Element Notification通知的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
vue2如何使用simple-keyboard软键盘有中文(拼音)
这篇文章主要介绍了vue2如何使用simple-keyboard软键盘有中文(拼音),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
Vue动态数据实现 el-select 多级联动、数据回显方式
这篇文章主要介绍了Vue动态数据实现 el-select 多级联动、数据回显方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
懒加载就是延时加载,即当需要用到的时候再去加载,本文主要介绍了Vue图片懒加载之Vue-Lazyload的使用,具有一定的参考价值,感兴趣的可以了解一下2024-05-05
今天小编就为大家分享一篇基于vue循环列表时点击跳转页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论