vue pc端element-ui的走马灯carousel实现自适应全屏banner

前提摘要：使用vue很方便做一些效果，目前开源的组件特别的多pc端使用轮播图的话element-ui的carousel是一个不错的选择，当然也可以选择swiper组件。

问题：我发现carousel组件容器的高度是固定写死的，就算是我把image图片的宽度设置100%，它会随着浏览器屏幕的宽度等比例缩小到我设置的最小宽度就不会再变小。但是因为外面的容器已经写死了一个高度，这样的话就会留有一片空白区域。如下：

解决思路：获取当前图片的高度然后赋给swiper外部容器的高度，然后flex布局容器里面的图片居中。

问题解决：这是我的自己的解决方案，大家有更好的可以留言谢谢。

1，template html代码

<div class="swiper">

    <el-carousel indicator-position="none" arrow="always" :height="bannerHeight + 'px'">

        <el-carousel-item v-for="(item, index) in swiperlist" :key="index">

            <a :href="item.bannerTargetUrl" :target="targetUrl(item.targetType)">

                <img :src="item.bannerUrl" ref="image" @load="imageLoaded">

            a>

        el-carousel-item>

    el-carousel>

div>

2,监听浏览器resize变化

当调整浏览器窗口的大小时，发生 resize 事件。

resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。

mounted () {

window.addEventListener( 'resize', () => {

this.bannerHeight = this.$refs.image[ 0].height

}, false)

},

3,第一次进入页面的时候图片还没加载完成，我需要在图片加载出来了然后获取到图片的高度赋给swiper容器的高度 bannerHeight

我是这样处理的：

load函数 methods中定义加载成功一张图片的时候执行获取当前第一张图片高度

完毕！