vue 监听dom元素尺寸大小改变_vue监听dom尺寸变化

方法：使用element-resize-detector插件来实现

实现：

1、安装插件，npm install element-resize-detector
2、在main.js中引入依赖，并挂在vue原型链上：
import ElementResizeDetectorMaker from "element-resize-detector"
Vue.prototype.$erd = ElementResizeDetectorMaker()
3、在界面中使用_this.$erd.listenTo()去做监听，示例代码如下：

  mounted() {
    const _this = this
    _this.$erd.listenTo(_this.$refs.advertisement, element => {
      // 这里写监听到尺寸变化后需要做的事
      // 我这里是想让类名为advertisement的dom元素的宽高比为780:230
      const newHeight = Math.floor(230 / 780 * element.clientWidth) + 'px'
      _this.$nextTick(() => {
        document.getElementsByClassName('advertisement')[0].style.height = newHeight
      })
    })
  },
  beforeDestroy() {
    const _this = this
    // 离开页面删除检测器和所有侦听器
    _this.$erd.uninstall(_this.$refs.advertisement) // 这里用ref是因为vue离开页面后获取不到dom
  },

 参考地址：vue中如何实现对dom元素大小改变的监听_vue监听dom尺寸变化_coldriversnow的博客-CSDN博客