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

2019-08-14  本文已影响0人  一叶知秋_038b

导入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)
完全删除检测器和所有侦听器。

上一篇 下一篇

猜你喜欢

热点阅读