html 尺寸发射改变,完美监听一个div尺寸的改变(不论何种方式导致的尺寸变化)...

前言

我们知道resize或者onResize事件是window才有的事件。

如图：

我们可以看到在最右侧，改变window的宽度，此时在左侧的chart div中监听到 window的resize后，做出了改变。也向右移动。

但是如果我们测试不改变window，而只是改变div的宽度呢？

如图:

我们让chart div右侧的 div消失(v-if设置为false)。

此时chart div中的window resize事件并没有监听到。

左侧的chart div没变,这不是我们要的效果。

第三种，如果我们动态改变css中的width呢？

如图

我们改变了chart div的width值，我们发现当width变得越来越小时，chart div的宽度也并没有改变(出现了横向滚动条而已)。说明也没监听到。

这也不是我们要的效果。

方案一

我们可以在chart div平级的位置，放置一个object元素。

设置object的css，使得object撑满父元素的宽高。