vue 监听元素大小变化 element-resize-detector 并移除监听 uninstall
程序员文章站
2022-06-25 12:04:19
前言: 记录一个好用的包,在做自适应模块的时候,可以实时监听页面中元素的宽高变化,弥补了window.onresize只能监听由于浏览器大小引起的元素变化;安装方法:npm install element-resize-detector或使用:
前言: 记录一个好用的包,在做自适应模块的时候,可以实时监听页面中元素的宽高变化,弥补了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