vue中监听某个元素宽度发生变化后，重新加载子组件

导入npm install element-resize-detector
1.可以浏览器统一导入 如放到index.html

<script src="node_modules/element-resize-detector/dist/element-resize-detector.min.js"></script>

 2.也可以在vue中导入
如在

<div id='test' v-if="showComponentFlag">我要测试改变宽度</div>

data:{
    showComponentFlag: true,
}


monted(){
  var elementResizeDetectorMaker = require("element-resize-detector");//导入
  // 创建实例
  var erd = elementResizeDetectorMaker();
  // 创建实例带参
  var erdUltraFast = elementResizeDetectorMaker({
                strategy: "scroll", //<- For ultra performance.
                callOnAdd: true,
                debug: true
            });
  //监听id为test的元素 大小变化
  erd.listenTo(document.getElementById("test"), function(element) {
    var width = element.offsetWidth;
    var height = element.offsetHeight;
    console.log("Size: " + width + "x" + height);

    //此处开始重载当前页面
    this.showComponentFlag = false;
    this.$nextTick(function(){
        this.showComponentFlag  = true;
    })
  });
}

 

3.erd实例方法
RemoveListener(element，listener)
从元素中移除侦听器。

4.

RemoveAllListener(element)
从元素中移除所有侦听器，但不完全删除检测器。如果以后可能会添加侦听器，并且不希望检测器再次初始化，请使用此函数。

5.

uninstall(element)
完全删除检测器和所有侦听器。

*****************************************************************************************

作者：一叶知秋_038b
链接：https://www.jianshu.com/p/b9004cb2fa2c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。