vue中使用element-resize-detector 元素监听_vue3 element-resize-detector

应用场景：我这边主要是使用他来监听一个DIV 盒子高度的变换从而实现水印组件的重新加载

 1、安装

npm install element-resize-detector --save

2、使用（全局或者局部）

import resizeDetector from 'element-resize-detector'

3、应用

<div ref="adaptionBox" id="adaptionBox" style="width:200px;height:200px;background:green"></div>
<div ref="tableBox" id="tableBox" style="width:200px;height:200px;background:red"></div>
 
data() {
    return {
        erd: null
    }
},
mounted(){
    this.erd = elementResizeDetectorMaker();
    this.$nextTick(() => {
        this.erd.listenTo(this.$refs.adaptionBox, element => {
            //这里面是监听变化后操作的
        });
    })
}
 
或者
 
mounted(){
    this.erd = elementResizeDetectorMaker();
    this.$nextTick(() => {
        this.erd.listenTo(document.getElementById("adaptionBox"), element => {
            document.getElementById("tableBox").style.height = window.innerHeight - element.offsetHeight; //这里面是监听变化后操作的
        });
    })
}