vue中使用el-carousel轮播图，实现在一个div充满轮播图

1、div

<div class="block" ref="carousel">
    <el-carousel trigger="click" :interval="3000" arrow="always" :height="carouselHeight">
        <el-carousel-item v-for="item in imgList" :key="item.name">
            <img :src="item.src"  
                 :title="item.title" 
                 alt="图片丢失了"
                 style="height:100%; width:100%;" 
            />
         </el-carousel-item>
    </el-carousel>
</div>

2、script

data(){
    return {
        imgList: [{
            name: 1,
            src: require("../assets/1.jpg"),
            title: ""
         },{
            name: 2,
            src: require("../assets/2.jpg"),
            title: ""
         },{
            name: 3,
            src: require("../assets/3.jpg"),
            title: ""
         },{
            name: 4,
            src: require("../assets/4.jpg"),
            title: ""
         }],
        carouselHeight: null
    }
},
mouted() {
    // 获取div的ref=“carousel”的高度
    let carousel_height = window.getComputedStyle(this.$refs.carousel).height;

    // 赋值给 el-carousel中height动态绑定的carouselHeight
    this.carouselHeight = carousel_height
}

3、实现轮播图充满一个div

主要是将el-carousel的高度设置为动态绑定数据 :height="carouselHeight" ，然后在mouted中获取div的高度初始化carouselHeight。