用ele ui做轮播图图片无法自适应解决方案

最近在做公司的一个官网，用的现在的主流标配，vue+ele ui，但是刚开始做轮播图的时候，就遇到了一个问题。那就是ele跑马灯组件的高度是写死的，无法自适应。所以我上网查了查资料。又结合自身情况，做了修改。

这是我所看到的原创作者的分享：
https://blog.csdn.net/juneoer/article/details/84205231

但是遇到了和评论区一样的问题，在$nextTick中无法获取图片的高度。
解决方法：（去掉clientheight[0]中的[0]即可）

第一步，动态设置图片高度并添加onload事件

第二步，添加空变量clientheight,并编辑imgload事件

export default {
  name: "",
  data() {
    return {
      bannerheight: ""
    };
  },
methods:{
  imgload() {
          this.$nextTick(() =>{
          this.bannerheight = this.$refs.bannerheight.height
          console.log(this.$refs.bannerheight.height)
         })
     }
 }
}

第三步，在图片挂载完成后增加监听事件

mounted(){
   window.addEventListener("resize", this.imgload, false);
  }

代码写到这里基本上可以实现轮播自适应了，但是切换到其他标题后，我们主页的轮播图会报一个这样的错误：
Cannot read property 'height' of undefined，报错位置在我们写的imgload（）方法上。

这是我从网上看到的一个博主的分享，跟我遇到相同的问题，并给出了解决方法。
https://blog.csdn.net/weixin_43274097/article/details/111194529

分析报错原因：页面发生路由跳转后，vue组件销毁了，但是window全局对象依然存在，所以仍然存在监听。需在销毁组件时移除监听。

第四步，在页面销毁后移除事件监听

beforeDestroy() { 
    window.removeEventListener('resize', this.imgload, false)
  },

全部代码如下

以上就是ele轮播图片无法自适应的解决方案了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~