如何监听DOM大小的变化 wd-domsize-monitor

wd-domsize-monitor
https://blog.csdn.net/mapbar_front/article/details/83190372

export default (function() {
    const elList = [];
    let timer = 0;
    function bind(el, next) {
        let obj = {
            el,
            callback: next,
            style: {
                width: getStyle(el, 'width'),
                height: getStyle(el, 'height'),
            }
        }
        elList.push(obj);
    }
    function remove(el) {
        elList.splice(elList.indexOf(el))
        if (elList.indexOf(el) !== -1) {
            elList.splice(elList.indexOf(el), 1);
        }
    }
    timer = setInterval(() => {
        for (let i = 0; i < elList.length; i++) {
            let dom = elList[i].el
            const style = {
                width: getStyle(dom, 'width'),
                height: getStyle(dom, 'height'),
            }
            if (!isEqul(style, elList[i].style)) {
                elList[i].style = {
                    width: style.width,
                    height: style.height,
                }
                elList[i].callback && elList[i].callback();
            }
        }
    }, 200)
    function getStyle(ele,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(ele,null)[attr];
        }
        return ele.currentStyle[attr];
    }
    function isEqul(obj1, obj2) {
        let isEqul = true;
        for (var i in obj1) {
            if (obj1[i] !== obj2[i]) {
                isEqul = false;
            }
        }
        return isEqul;
    }
    return {
        bind,
        remove,
    }
})();

运行使用

import DomSize from "@/assets/js/domsize"
 mounted() {
    this.init();
    DomSize.bind(this.$refs.container,  ()=> {
      this.listenResize()
    });
}

方法2： window.MutationObserver
https://blog.csdn.net/u010419337/article/details/81474311?utm_medium=distribute.pc_relevant.none-task-blog-title-4&spm=1001.2101.3001.4242

let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
    let element = document.querySelector('.xterm-screen')
    this.observer = new MutationObserver((mutationList) => {
      for (let mutation of mutationList) {
        // console.log(mutation)
      }
      let width = getComputedStyle(element).getPropertyValue('width')
      let height = getComputedStyle(element).getPropertyValue('height')
      if (width === this.recordOldValue.width && height === this.recordOldValue.height) return
      this.recordOldValue = {
        width,
        height
      }
      this.firedNum += 1
    })
    this.observer.observe(element, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })