美文网首页
vue中监控元素大小变化element-resize-detec

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

作者: 一叶知秋_038b | 来源:发表于2019-08-14 10:18 被阅读0次

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

相关文章

网友评论

      本文标题:vue中监控元素大小变化element-resize-detec

      本文链接:https://www.haomeiwen.com/subject/btfvjctx.html