el-carousel走马灯实现高度自适应

el-carousel默认高度为300，高度写死的话，不会自适应屏幕高度。所以高度要设置个动态高度

<el-carousel class="el-carousel" :height="screenheight" trigger="click" :interval="5000">
    <el-carousel-item v-for="item in fileList" :key="item.id">
        <img :src="item.src" style="width:100%;height:100%" />
    </el-carousel-item>
</el-carousel>

要获取到当前屏幕的高度给screenheight

data() {
        return {
            screenheight: document.documentElement.clientHeight + 'px'
            fileList:[{id: 1,src: require('本地图片地址')},{id: 2,src: require('本地图片地址')}]
        }
    },

我们要做到缩放屏幕的时候，高度要实时更新。onresize 事件会在屏幕缩放时执行

created(){
        window.onresize = () => {
            return (()=>{
                this.screenheight = document.documentElement.clientHeight + 'px'
            })
        }
    }

最后定义个样式，就可以实现自适应全屏了

<style scoped>
.el-carousel{
    width: 100%
}
</style>