vue 监听元素大小变化 element-resize-detector 并移除监听 uninstall_vue 监听组件大小变化并卸载

前言： 记录一个好用的包，在做自适应模块的时候，可以实时监听页面中元素的宽高变化，弥补了window.onresize只能监听到由浏览器大小变化引起的元素变化的局限性；

安装方法：

npm install element-resize-detector
1

或

<script src="node_modules/element-resize-detector/dist/element-resize-detector.min.js"></script>
1

使用：

<div ref="box" id="box"></div>
1

import elementResizeDetectorMaker from 'element-resize-detector';
var erd = elementResizeDetectorMaker(); //创建实例

mounted() {
    //监听id为box的元素
    erd.listenTo(document.getElementById("box"),(element)=>{
        var width = element.offsetWidth;
    	var height = element.offsetHeight;
    });
},
beforeDestroy(){
	//离开页面删除检测器和所有侦听器
    erd.uninstall(this.$refs.box); //这里用ref是因为vue离开页面后获取不到dom
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14

补充： erd 实例方法

RemoveListener(element，listener)
从元素中移除侦听器

RemoveAllListener(element)
从元素中移除所有侦听器，但不完全删除检测器。如果以后可能会添加侦听器，并且不希望检测器再次初始化，请使用此函数

uninstall(element)
完全删除检测器和所有侦听器