获取img实例，动态设置el-carousel高度

<template><div class="content main"><el-carousel arrow="always" :height="bannerHeight + 'px'"><el-carousel-item v-for="(item, index) in banners" :key="index"><imgref="bannerImg":src="item"alt="banner"class="banner-img"@load="imgLoad"/></el-carousel-item></el-carousel></div>
</template><script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';const banners = ref(['/images/banner/banner1.png','/images/banner/banner1.png','/images/banner/banner1.png','/images/banner/banner1.png'
]);const bannerHeight = ref(200);
const bannerImg = ref(null);function imgLoad() {nextTick(() => {const imgs = bannerImg.value;if (Array.isArray(imgs) && imgs.length > 0) {bannerHeight.value = imgs[0].clientHeight;} else if (imgs && imgs.clientHeight) {bannerHeight.value = imgs.clientHeight;}});
}onMounted(() => {imgLoad();window.addEventListener('resize', imgLoad);
});onBeforeUnmount(() => {window.removeEventListener('resize', imgLoad);
});
</script><style scoped>
.content {margin: 16px auto;
}.banner-img {width: 100%;height: auto;object-fit: cover;
}/* 移动设备样式 */
@media screen and (max-width: 768px) {.content {margin: 0 auto;overflow: hidden;padding: 8px;}.banner-img {border-radius: 8px;}
}
</style>