elementUI轮播(Carousel)自适应

  本来这种没什么争议的东西没必要重复发的, 不过我在找它的时候, 发现有的竟然需要VIP才能查看, 我不知道他是怎么想的, 反正我是怒了.
  费不多说, 直上代码:
  页面:

<el-carousel arrow="always" :height="bannerHeight+'px'">
        <el-carousel-item v-for="it in banner" :key="it.bannerName">
            <el-row>
                <el-col :span="24">
                    <img ref="bannerHeight" :src="it.bannerPath" :alt="it.bannerName" @load="imgLoad" style="width: 100%">
                </el-col>
            </el-row>
        </el-carousel-item>
    </el-carousel>

  JS:

export default {
        name: "Banner",
        data: function () {
            return {
                banner: [],
                bannerHeight:"",
            };
        },
        mounted() {
            this.imgLoad();
            window.addEventListener('resize',() => {
                this.imgLoad();
            },false)
            this.$axios("navData/getInitData").then(result => {
                this.banner = result.data.bannerData
            })
        },
        methods: {
            imgLoad(){
                this.$nextTick(()=>{
                    let ref = this.$refs
                    this.bannerHeight=ref.bannerHeight&&ref.bannerHeight.length?ref.bannerHeight[0].height:'';
                })
            }
        }
    }

  核心思想就是图片的高度即Carousel 的高度; 将图片占满容器, 窗口宽度改变, 图片宽度随之改变, 这样就实现了自适应.
  转自: 忘了…