vue中监控元素大小变化element-resize-detector
导入npm install element-resize-detector
1.可以浏览器统一导入 如放到index.html
<script src="node_modules/element-resize-detector/dist/element-resize-detector.min.js"></script>
.也可以在vue中导入
如在
monted(){
var elementResizeDetectorMaker = require("element-resize-detector");//导入
// 创建实例
var erd = elementResizeDetectorMaker();
// 创建实例带参
var erdUltraFast = elementResizeDetectorMaker({
strategy: "scroll", //<- For ultra performance.
callOnAdd: true,
debug: true
});
//监听id为test的元素 大小变化
erd.listenTo(document.getElementById("test"), function(element) {
var width = element.offsetWidth;
var height = element.offsetHeight;
console.log("Size: " + width + "x" + height);
});
}
3.erd实例方法
RemoveListener(element,listener)
从元素中移除侦听器。
RemoveAllListener(element)
从元素中移除所有侦听器,但不完全删除检测器。如果以后可能会添加侦听器,并且不希望检测器再次初始化,请使用此函数。
5.
uninstall(element)
完全删除检测器和所有侦听器。
vue中监听echarts图形
先在需要引入的页面中引入
import elementResizeDetectorMaker from "element-resize-detector";
第二步在组件中
如在
<el-col class="contatin" ref="aa" id="test">
最后在script中的mounted中使用
mounted() {
let that = this;
that.getdatatime();
that.gettree();
var ss = that.$refs["aa"];
var erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById("test"), function(ss) {
var width = ss.offsetWidth;
var height = ss.offsetHeight;
that.$nextTick(function() {
//使echarts尺寸重置
if (document.getElementById("chartaa")) {
that.$echarts.init(document.getElementById("chartaa")).resize();
}
if (document.getElementById("chartbb")) {
that.$echarts.init(document.getElementById("chartbb")).resize();
}
});
});
},