技术学习

Element UI 走马灯 根据屏幕宽高自适应(多图

展示效果

Element UI 走马灯 根据屏幕宽高自适应(多图

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

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

Element UI 走马灯 根据屏幕宽高自适应(多图

方法解析

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

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

Element UI 走马灯 根据屏幕宽高自适应(多图

完整代码


<!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://www.qqzmly.com/usr/uploads/2022/01/2888890086.jpg",
                        "https://www.qqzmly.com/usr/uploads/2022/01/1900941580.jpg",
                        "https://www.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

GouGe
程志辉 前行的路充满未知,不努力尝试,永远都不知道有多精彩。

发表评论

已有 3 条评论
  1. 测试一下评论

  2. 在下雪天更新了一篇,真不容易!哈哈~~

    1. 刚好工作碰到的问题,就记录了一下(好久都没更新博客了,感谢来访