vue 监听dom元素的宽高变化

vue 监听dom元素的宽高变化

1、准备一个插件

npm install element-resize-detector

2、使用

 mounted() {
    // 直接导入使用，也可以在main.js中引入
    const elementResizeDetectorMaker = require('element-resize-detector');
    // 创建实例，无参数
    const erd = elementResizeDetectorMaker();
    // 创建实例带参数
    // const erdUltraFast = elementResizeDetectorMaker({
    //   strategy: 'scroll',
    //   callOnAdd: true,
    //   debug: true
    // });
    //监听class为top的元素 大小变化
    erd.listenTo(document.querySelector('.top'),(element)=>{
      const width = element.offsetWidth;
      const height = element.offsetHight;
      this.selectWidth= (width - 100 ) + 'px'
    })
  },