ResizeObserver 监听任意HTML元素尺寸变化兼容低版本浏览器

本文介绍了如何利用ResizeObserver监听DOM元素尺寸变化以实现ECharts图表的动态重绘,并针对不兼容ResizeObserver的低版本浏览器提出了解决方案,即引入resize-observer-polyfill插件进行兼容处理。通过实例代码和解决步骤,确保了在各种浏览器环境下ECharts图表的正常显示。
摘要由CSDN通过智能技术生成

使用场景:
使用ResizeObserver监听.border元素(echarts元素父级)尺寸变化,echarts图表进行重绘

先上代码:

let resizeObserver = null;    
mounted() {
	//监听class="border"元素的尺寸变化
	var that = this;
	resizeObserver = new ResizeObserver(() => {
	  that.refreshCharest();
	});
	resizeObserver.observe(document.querySelector(".border"));
}
methods:{
	// 更新echarts
	refreshCharest() {
	  myLine.resize(); //图表重绘方法
	},
}

当前功能在本人浏览器测试没有问题。但是在一些低版本浏览器就会提示ResizeObserver未定义。
翻阅资料发现ResizeObserver主流浏览器只兼容高版本,基本上2018年以前的浏览器都不兼容,部分浏览器甚至2020年以前都不兼容。

解决方法:
可以使用第三方的polyfill方案,下载resize-observer-polyfill插件:

npm install resize-observer-polyfill --save-dev

页面引入:

import ResizeObserver from 'resize-observer-polyfill';

此时再运行就可以了

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值