Vue如何监听元素宽高变化

npm install element-resize-detector

<template>
  <transition>
    <div v-resize="DomResize">
    </div>
  </transition>
</template>

<script>
export default {
  directives: {
    resize: {
      // 指令的名称
      bind(el, binding) {
        // el为绑定的元素，binding为绑定给指令的对象
        // console.log(el, '绑定', binding)
        let width = ''
        let height = ''
        function isResize() {
          const style = document.defaultView.getComputedStyle(el)
          if (width !== style.width || height !== style.height) {
            binding.value({ width: style.width, height: style.height }) // 关键(这传入的是函数,所以执行此函数)
          }
          width = style.width
          height = style.height
        }
        el.__vueSetInterval__ = setInterval(isResize, 300)
      },
      unbind(el) {
        // console.log(el, '解绑')
        clearInterval(el.__vueSetInterval__)
      }
    }
  },
  methods:{
    DomResize(data) {
      // const { width, height } = data
      // console.log('width:', width, 'height:', height, '   dom尺寸方式改变')
    }
  }
}
</script>

npm install element-resize-detector

import elementResizeDetectorMaker from ‘element-resize-detector';
var erd = elementResizeDetectorMaker(); //创建实例

mounted() {
    //监听id为box的元素 重绘echarts
    erd.listenTo(document.getElementById("box"),(element)=>{
        var width = element.offsetWidth;
        var height = element.offsetHeight;
         that.$echarts.init(document.getElementById('xxxx')).resize();
    });
},
beforeDestroy(){
    //离开页面删除检测器和所有侦听器
    erd.uninstall(this.$refs.box); //这里用ref是因为vue离开页面后获取不到dom
}