当echarts图表要跟随父元素宽高而变化时,我们需要对他的父级元素进行监听,但是resize只能对windows窗口进行监听,对普通dom元素进行监听是不行的.
1.轮循(不优雅)
2.MutationObserver、ResizeObserver 有兼容性问题
3.使用iframe模拟window的resize
创建一个隐藏的iframe 让他与父元素的宽高相等 添加到父元素里 这样父元素宽高改变的时候 iframe也会跟着改变 然后我们监听contentWindow就可以了(注意:父元素得position:relative定位)
observe(dom,handler) {
// 创建一个iframe
let frame = document.createElement('iframe')
// 添加样式 脱离文档流 与父元素宽高相等
const css =
"position:absolute;left:0;top:-100%;width:100%;height:100%;visibility:hidden;pointer-events:none;";
frame.style.cssText = css;
// frame加载成功后监听resize事件
frame.onload = () => {
frame.contentWindow.addEventListener('resize',() => {
handler(dom);
})
};
// 把frame添加到父元素里
dom.appendChild(frame);
return frame;
}
// 调用
let parent = this.$refs.parent.$el;
this.observe(parent, () => {
this.myChart.resize();
});