vue 监听元素大小变化 element-resize-detector 并移除监听 uninstall

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

安装方法：

npm install element-resize-detector

或

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

使用：

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

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
},

补充： erd 实例方法

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

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

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

本文地址：https://blog.csdn.net/HuangsTing/article/details/107540572