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

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

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

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

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

<div class="slideshow">
      <el-carousel :interval="3000" type="card" :height="bannerheight + 'px'">
        <el-carousel-item>
          <h3 class="medium">
            <img ref="bannerheight" src="../assets/banner1.png" alt="" @load="imgload">
          </h3>
        </el-carousel-item>
        <el-carousel-item>
          <h3 class="medium">
            <img ref="bannerheight" src="../assets/banner2.png" alt="" @load="imgload">
          </h3>
        </el-carousel-item>
        <el-carousel-item>
          <h3 class="medium">
            <img ref="bannerheight" src="../assets/banner3.png" alt="" @load="imgload">
          </h3>
        </el-carousel-item>
      </el-carousel>
    </div>

第二步，添加空变量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)
  },

全部代码如下

<template>
  <div class="header">
    <div class="slideshow">
      <el-carousel :interval="3000" type="card" :height="bannerheight + 'px'">
        <el-carousel-item>
          <h3 class="medium">
            <img
              ref="bannerheight"
              src="../assets/banner1.png"
              alt=""
              @load="imgload"
            />
          </h3>
        </el-carousel-item>
        <el-carousel-item>
          <h3 class="medium">
            <img
              ref="bannerheight"
              src="../assets/banner2.png"
              alt=""
              @load="imgload"
            />
          </h3>
        </el-carousel-item>
        <el-carousel-item>
          <h3 class="medium">
            <img
              ref="bannerheight"
              src="../assets/banner3.png"
              alt=""
              @load="imgload"
            />
          </h3>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
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);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.imgload, false);
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.slideshow {
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    img {
      height: 100%;
      width: 100%;
    }
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}
</style>

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