欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

相关标签: vue demo