vue+element项目实时监听div宽度的变化

npm install element-resize-detector

<div id="test">
    <div id="eChart">
</div>

<script src="node_modules/element-resize-detector/dist/element-resize-detector.min.js"></script>
// With default options (will use the object-based approach).
var erd = elementResizeDetectorMaker();
// With the ultra fast scroll-based approach.
// This is the recommended strategy.
var erdUltraFast = elementResizeDetectorMaker({
  strategy: "scroll" //<- For ultra performance.
});
//监听元素size变化，触发响应事件
erd.listenTo(document.getElementById("test"), function(element) {
  var width = element.offsetWidth;
  var height = element.offsetHeight;
  console.log("Size: " + width + "x" + height);
});

var elementResizeDetectorMaker = require("element-resize-detector")

 var erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById("test"), function (element) {
      var width = element.offsetWidth
      var height = element.offsetHeight
      that.$nextTick(function () {
        console.log("Size: " + width + "x" + height)
        //使echarts尺寸重置
        that.$echarts.init(document.getElementById("eChart")).resize()
      })
    })

directives: {  // 使用局部注册指令的方式
  resize: { // 指令的名称
    bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
      let width = '', height = '';
      function isReize() {
        const style = document.defaultView.getComputedStyle(el);
        if (width !== style.width || height !== style.height) {
          binding.value();  // 关键
        }
        width = style.width;
        height = style.height;
      }
      el.__vueSetInterval__ = setInterval(isReize, 300);
    },
    unbind(el) {
      clearInterval(el.__vueSetInterval__);
    }
  }
}
//然后在html中
<div v-resize="resize"></div> // 绑定的resize是一个函数
//在methods中
resize() {  // 当宽高变化时就会执行
  //执行某些操作
}