Vue实现监听dom节点宽高变化方式

    <div ref="datas">
            <div class="scroll_box" ref="scroll" style="width:20%;height: 20%;overflow:scroll;position: absolute;left: 0;top: 0;background-color: #000;">
                      <div class="scroll_child" style="width:300%;height: 300%;"></div>
            </div>
          <div class="scroll_box2" ref="scroll2" style="width:20%;height: 20%;overflow:scroll;position: absolute;left: 0;top: 0;background-color: #000;">
              <div class="scroll_child" style="width:300px;height: 300px;"></div>
          </div>
    </div>

mounted(){
        // 监听节点宽高变小
        (this.$refs.scroll as HTMLElement).scrollTop = 1000;
        (this.$refs.scroll as HTMLElement).scrollLeft = 1000;
        (this.$refs.scroll as HTMLElement).addEventListener('scroll', () => {
            this.width = ((this.$refs.datas as Vue).$el as HTMLElement).offsetWidth;
            (this.$refs.scroll2 as HTMLElement).scrollTop = 1000;
            (this.$refs.scroll2 as HTMLElement).scrollLeft = 1000;
        });
        
        // 监听节点宽高变大
        (this.$refs.scroll2 as HTMLElement).scrollTop = 1000;
        (this.$refs.scroll2 as HTMLElement).scrollLeft = 1000;
        (this.$refs.scroll2 as HTMLElement).addEventListener('scroll', () => {
            this.width = ((this.$refs.datas as Vue).$el as HTMLElement).offsetWidth;
            (this.$refs.scroll as HTMLElement).scrollTop = 1000;
            (this.$refs.scroll as HTMLElement).scrollLeft = 1000;
        })
}

<div ref="datas"></div>

mounted(){
        let erd = elementResizeDetectorMaker();
        erd.listenTo((this.$refs.datas as Vue).$el,  (element: HTMLElement) => {
            this.width = element.offsetWidth;
        })
}