Vue - 使用 element-resize-detector 监听容器宽高变化

Vue 使用 element-resize-detector 监听容器宽高变化

https://www.npmjs.com/package/element-resize-detector

1. 安装 element-resize-detector

   npm install element-resize-detector

2. 引入 element-resize-detector

   import elementResizeDetectorMaker from "element-resize-detector";
   

   或

   let elementResizeDetectorMaker = require("element-resize-detector");
   

3. mounted 生命周期中使用

   // 监听容器高度
   const erd = elementResizeDetectorMaker();
   // this.$refs.topWrap
   erd.listenTo(document.getElementById("topWrap"), (element) => {
     let width = element.offsetWidth;
     let height = element.offsetHeight;
   });