相信很多用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的引入和监听了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~
