程志辉博客 - 一个伪文艺青年
贵在坚持,难在坚持,成在坚持!
程志辉

展示效果

解决方法的原理:监听屏幕视口大小如果'resize',发生改变了,就获取图片的高度height,然后渲染到页面

ElementUI 地址: https://element.eleme.cn/#/zh-CN/component/carousel

方法解析

1.窗口第一次打开的时候加载执行 imgLoad()方法,第一次加载时获取图片在窗口中的高度,然后渲染到页面中去。

2.接着通过addEventListenner()方法监听视口是否发生改变,如果发生改变,重新调用imgLoad()方法渲染数据到页面,这样图片高度就可以随视口改变发生改变,适应各种大小屏幕。

完整代码


<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <!-- 引入ElementUI  CDN -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>ElementUI 走马灯自适应</title>
</head>
<style type="text/css">
  
</style>
 
<body>
    <div id="app">
        <el-carousel :height="bannerHeight+'px'">
            <el-carousel-item v-for="item in banner" :key="item">
                <el-row :gutter="12">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="height:340px;margin-bottom: 20px;">
                            <img  ref="bannerHeight" :src="item" alt="" @load="imgLoad" style="width: 100%">
                    </el-col>
                </el-row>
            </el-carousel-item>
        </el-carousel>
 
        <div id="test-div" style="border: 5px solid red;background-color: antiquewhite;">当前宽度:{{bannerwidth}}<br/>当前高度:{{bannerHeight}}</div>
 
    </div>
 
</body>
<!-- 引入vue组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    //注册使用vue
    var Vue = window.Vue;
    var app = new Vue({
        el: '#app',
        data() {
            return {
                bannerHeight:"",
                bannerwidth:"",
                banner:[
                        "https://cdn1.qqzmly.com/usr/uploads/2022/01/2888890086.jpg",
                        "https://cdn1.qqzmly.com/usr/uploads/2022/01/1900941580.jpg",
                        "https://cdn1.qqzmly.com/usr/uploads/2022/01/1639849891.jpg"
                    ]
            }
        },
        mounted(){
            this.imgLoad();
            window.addEventListener('resize',() => {
                this.bannerHeight=this.$refs.bannerHeight[0].height;
                this.imgLoad();
            },false)
        },
        methods: {
            imgLoad(){
                this.$nextTick(()=>{
                    this.bannerHeight=this.$refs.bannerHeight[0].height;
                    console.log(this.$refs.bannerHeight[0].height);
                     // document.getElementsByClassName拿到的是数组并非某一个对象
                    var testH=document.getElementById("test-div");
                    testH.style.height= this.bannerHeight+"px";

                    this.bannerwidth = document.body.clientWidth
                })
            }
        }
 
    })
 
</script>
 
</html>

原文链接:https://blog.csdn.net/qq_40976321/article/details/104513316

2022年01月14日
  • 远山笔记 清晰明了,学到了
  • test 测试一下评论
  • Lvtu 在下雪天更新了一篇,真不容易!哈哈~~
  • 程志辉 作者 回复 Lvtu 刚好工作碰到的问题,就记录了一下(好久都没更新博客了,感谢来访
Icefox Theme . 鄂ICP备16001608号-1