当前位置: 首页 > Web前端 > HTML

完美监听一个div的大小变化(不管是什么方法引起的大小变化)

时间:2023-04-02 14:05:06 HTML

前言我们知道resize或者onResize事件是一个window-only事件。如图:我们可以看到在最右边,窗口的宽度发生了变化。这时在左边的chartdiv中监听到windowresize后,就发生了变化。也向右移动。但是如果我们测试不改变窗口,而只是改变div的宽度呢?如图:我们让图表div右侧的div消失(v-if设置为false)。此时chartdiv中的windowresize事件没有监听到。左边的图表div没有变化,这不是我们想要的效果。第三,如果我们在css中动态改变宽度怎么办?如图所示,我们改变了图表div的宽度值,发现当宽度越来越小的时候,图表div的宽度并没有发生变化(只是出现了一个水平滚动条)。也没有听到指令。这不是我们想要的效果。选项1我们可以在图表div的级别放置一个对象元素。设置对象的css,使对象填充父元素的宽度和高度。

此时在js中,我们可以监控这个对象的大小。只要监控了对象的大小,是不是就间接监控了图表div?//注意。通过this.$refs["objectRef"]获取对象后,还需要通过property.contentDocument.defaultView获取最里面的窗口文档部分this.$refs["objectRef"].contentDocument.defaultView,并打印到consolelog可以看到this.$refs["objectRef"].contentDocument.defaultView的返回值为window。既然是窗口,那不是有resize事件吗?this.$refs["objectRef"].contentDocument.defaultView.addEventListener("resize",()=>{this.$chart.resize();});这样就可以完美的监听到图表div的变化,然后重新绘制图表。解决方案2使用ResizeObserverapi,请查看此链接了解详细信息。它的用法非常简单。constresizeObserver=newResizeObserver(entries=>{//回调this.$chart.resize();});//监听对应的domresizeObserver.observe(this.$refs.chart);目前,兼容性还可以在后续添加其他选项。..