把elementui的轮播图做成响应式高度的方法（el-carousel的走马灯实现高度自适应）

参考了大神的文章：
https://blog.csdn.net/qq_40942490/article/details/109842331
我手写出来了。代码如下：

      <div class="home-middle-top">
        <el-carousel trigger="click" :height="bannerHeight+'px'">
          <el-carousel-item v-for="item in imgUrls" :key="item.id">
            <el-row>
              <el-col :span="24" class="banner_img">
                <img ref="bannerHeight" :src="item.idView" class="bannerImg" @load="imgLoad"/>
              </el-col>
            </el-row>
          </el-carousel-item>
        </el-carousel>
      </div>

  data() {
    return {
      showIndex: true,
      bannerHeight:'',
      lis:[
          "11",
          "22"
      ],
      imgUrls:[
        {id:0,idView:require('./../../public/static/images/index-banner.jpg')},
        {id:1,idView:require('./../../public/static/images/index-banner.png')},
      ]
    }
  },

  methods: {
    imgLoad(){
      this.$nextTick(()=>{
        this.bannerHeight=this.$refs.bannerHeight[0].height
        console.log("this.$refs.bannerHeight[0].height",this.$refs.bannerHeight[0].height)
      })
    },

  mounted() {
    this.init()
    this.imgLoad()
    window.addEventListener('resize',()=>{
      this.bannerHeight=this.$refs.bannerHeight[0].height
    this.imgLoad()
    })
  }

.home-middle-top {
  height: 42%;
  overflow: hidden;
  /*margin-bottom: 10vh;*/
  background-color: red;
}

.home-middle-bottom {
  height: 52%;
  margin-top: 3%;
}

.home-middle-top img {
  display: block;
  width: 100%;
  height: 100%;

}
.bannerImg {
  position: relative;
  left: 50%;
  transform: translate(-50%);
}