vue element ui——监听dom元素高度和宽度ag凯发k8国际的解决方案整理(八种方法) -ag凯发k8国际
监听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-detector2、使用
var elementresizedetectormaker = require("element-resize-detector") var erd = elementresizedetectormaker()erd.listento(this.$el, function (element) {var width = element.offsetwidthvar height = element.offsetheightthat.$nexttick(function () {console.log("size: " width "x" height)})})wd-domsize-monitor
vue中监控元素大小变化element-resize-detector
vue element项目里实时监听某个div宽度的变化,然后执行相应的事件
如何监听dom大小的变化
js怎么监听div元素的resize
总结
以上是ag凯发k8国际为你收集整理的vue element ui——监听dom元素高度和宽度ag凯发k8国际的解决方案整理(八种方法)的全部内容,希望文章能够帮你解决所遇到的问题。
- 上一篇:
- 下一篇: