相信很多用ele做pc端平台的很多小伙伴都遇到过这样一个问题，就是在做侧边栏菜单时，会有一个收缩和展开的一个功能。

这就导致了一个问题，那就是在我门伸缩的过程中。右边的主题页面的宽度就会随之改变。

我上网查了查 ，也动手试了试这个 window.onresize = ()=>{}。却不尽人意，因为

他只能检测浏览器大小的变化，完全跟我们的需求不沾边。经过我的不屑怒力，

终于找到了解决的方法。

这是我所看到的原创作者的分享：

https://shentuzhigang.blog.csdn.net/article/details/107881057

第一步 通过npm install element-resize-detector获取elementResizeDetectorMaker

npm install element-resize-detector

第二步：将依赖引入import elementResizeDetectorMaker from ‘element-resize-detector’ (main.js中)

import ElementResizeDetectorMaker from "element-resize-detector"
Vue.prototype.$erd = ElementResizeDetectorMaker()

第三步：使用（这里的东西是不完整的旨在能让你们看懂）

<template>
  <div class="index">
    <div class="left"></div>
    <div class="right" :style="
        'width:calc(100% - (' +
        width +
        'px));height:' +
        height +
        'px'
      "></div> 
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: "",
      height: "",
    };
  },
  mounted() {
    this.$erd.listenTo(document.querySelector(".left"), (element) => {
      this.width = element.offsetWidth;
      this.height = element.offsetHeight;
      // 这里就能随时打印出来.left的宽和高了
      console.log('width'+this.width,'height'+this.height)  
    });
  },
};
</script>

<style>
</style>

以上就是element-resize-detector的引入和监听了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~