美文网首页
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