Vue - 使用 element-resize-detector 监听容器宽高变化_vue监听盒子高度的变化

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";
   1

   或

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

3. mounted 生命周期中使用

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