vue中监控元素大小变化element-resize-detector

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

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

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

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);
  });
}

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容