Vue + Element UI——监听DOM元素高度和宽度解决方案整理(八种方法)

问题描述

监听DOM元素大小的变化,在前端开发中,算是一个比较常见的需求,比如我们要制作可伸缩的图表的时候,可能需要根据DOM大小的变化,进行动态的更新图表。

解决方案

方法一: 

监听window变化,再改变对应DOM变化

window.onresize = function() {
	const width = getStyle(dom, 'width');
	const height = getStyle(dom, 'height');
}
function getStyle(ele,attr){
  	if(window.getComputedStyle){
        return window.getComputedStyle(ele,null)[attr];
    }
    return ele.currentStyle[attr];
}

通过这样的方式可以进行监听DOM元素的变化,但是不是最完善的。

例:通过js改变一个dom的宽度或者高度,但是window是没有触发resize事件的。 

方法二:

定时轮询 

let timer = 0;
timer = setInterval(() => {
    const style = {
            width: getStyle(dom, 'width'),
            height: getStyle(dom, 'height'),
    };
}, 200)

每过200ms,我们都进行一次dom大小的获取,从而和之前的宽高进行对比,就能知道DOM是否发生了变化。

缺点:开销太大。

方法三:

监听元素的滚动事件,在 目标 dom 里面包裹一个同等大小的 div,是隐藏不可见的,当目标 dom 大小变化时,触发滚动事件。

参考文章:巧妙监测元素尺寸变化

方法四:

MutationObserver

通过 MutationObserver 监听dom 节点变化,MutationObserver 是在DOM4规范中定义的,它的前身是 MutationEvent 事件,该事件最初在 DOM2 事件规范中介绍,到来了 DOM3 事件规范中正式定义,但是由于该事件存在兼容性以及性能上的问题被弃用;可以用它来监听 dom style 的变化

参考文章:

Mutation Observer API

JS监听div的resize事件

方法五:

ResizeObserver

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log(entry.target.style.width)
  }
});
resizeObserver.observe(document.querySelector('.line-numbers'));

参考文章:用vue.js如何实时获取某个div的变化的width,并把数据展示在页面?

方法六:

IE9-10 默认支持 div 的 resize 事件,可以直接通过 div.attachEvent('onresize', handler); 的方式实现;

其它浏览器,通过在 div 中添加一个内置 object 元素实现监听,设置 object 元素的 style 使其填充满 div,这样当 div 的 size 发生变化时,object 的 size 也会发生变化,然后监听 object 元素的 contentDocument.defaultView(window对象)的 resize 事件。

参考文章:JS监听div的resize事件

项目使用分析 

第一,通过setInterval的方式进行监听DOM变化,开销较大。

第二,通过一个简单的API,监听DOM,就进行bind函数的绑定,解除一个DOM的监听,使用类似clear之类的函数解除监听。

第三,支持回调函数。

方法七:

Vue指令

参考文章:监听尺寸元素变化

方法八:

npm项目

例如:

element-resize-detector 

NPM仓库:https://www.npmjs.com/package/element-resize-detector

1、安装:

npm install element-resize-detector

2、使用 

var elementResizeDetectorMaker = require("element-resize-detector")
var erd = elementResizeDetectorMaker()
    erd.listenTo(this.$el, function (element) {
      var width = element.offsetWidth
      var height = element.offsetHeight
      that.$nextTick(function () {
        console.log("Size: " + width + "x" + height)
      })
    })

wd-domsize-monitor

参考文章

vue中监控元素大小变化element-resize-detector

vue+element项目里实时监听某个div宽度的变化,然后执行相应的事件

如何监听DOM大小的变化

js怎么监听div元素的resize

 

你可能感兴趣的:(#,JavaScript,JavaScript,Vue,Element,UI)