碎碎念:
工作遇到了,然后就在网上各种copy了,CV搬砖
element-resize-detector 监听元素宽高变化,可以帮助使用者在元素尺寸发生变化时执行某些操作,比如浏览器显示区域变化echarts跟着变化。
link1: https://github.com/wnr/element-resize-detector.git
link2:GitHub - wnr/element-resize-detector: Optimized cross-browser resize listener for elements.
1、安装
方式1:
npm install element-resize-detector --save
方式2:
下载js库在script标签中引用
<script src="/path/to/element-resize-detector.js"></script>
2、引入
Secen1
Vue2项目可在main.js中引用并全局挂载
import ElementResizeDetectorMaker from "element-resize-detector";
Vue.prototype.$erd = ElementResizeDetectorMaker();
Secen2
也可以在需要使用的页面使用
注意:这里使用require引用
var elementResizeDetectorMaker = require("element-resize-detector");
3、使用
Secen1
dynamicResize() {
this.$erd.listenTo(
document.querySelector(".line-container"),
_.debounce(() => {
this.resizeChart();
}, 300)
);
},
Secen2
dynamicResize() {
var erd = elementResizeDetectorMaker();
erd.listenTo(
document.querySelector(".line-container"),
_.debounce(() => {
this.resizeChart();
}, 300)
);
},
在mounted中使用这个方法即可
mounted() {
this.myChart = this.$echarts.init(this.$refs.lineContainer);
this.initChart();
this.dynamicResize();
},
在页面销毁前停止监听
Secen1
beforeDestroy() {
this.$erd.uninstall(document.querySelector(".line-container"));
},
Secen2
beforeDestroy() {
var erd = elementResizeDetectorMaker();
erd.uninstall(document.querySelector(".line-container"));
},
然后就没然后了,完工!!!