Carousel走马灯根据屏幕宽高大小自适应

HTML部分：

 <!--外层div通过ref获取高度-->
 <div class="M1container" ref="M1c">
       <el-carousel
        :height="M1Height + 'px'"
        :interval="2000"
       >
            <el-carousel-item v-for="item in 4" :key="item">
                <h3>{{ item }}</h3>
            </el-carousel-item>
  </el-carousel>
    </div>

JS部分：

export default {
    data(){
        return{
            M1Height:'',
        }
    },
    // 根据屏幕自适应轮播图大小
    mounted(){
        this.M1Height = this.$refs.M1c.clientHeight;
    }
}

原理就是通过ref获取走马灯外层容器可视区域的高度，然后再赋值给走马灯