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

最新推荐文章于 2025-03-26 15:28:30 发布

Special_girl

最新推荐文章于 2025-03-26 15:28:30 发布

阅读量4k

点赞数 7

文章标签： elementui vue.js css html

本文链接：https://blog.csdn.net/Special_girl100/article/details/125765922

版权

本文介绍了如何在Vue.js中创建一个自适应屏幕高度的全屏轮播图组件。通过动态设置轮播图高度为窗口高度，并在窗口尺寸变化时更新高度，实现了轮播图随屏幕缩放而实时调整。使用了`el-carousel`组件，并在`mounted`钩子中监听`onresize`事件来更新高度。同时，提供了相应的CSS样式确保轮播图宽度充满屏幕。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 事件会在屏幕缩放时执行

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

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

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