element-ui走马灯实现图片自适应

elementUI走马灯实现图片自适应（等比缩放，使得图片缩小不挤压，放大不拉伸变形）

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

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

代码：

<el-carousel :interval="5000" arrow="always" :height="bannerHeight+'px'" style="border: 1px solid red;"><el-carousel-item v-for="item in 4" :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="../image/banner1.png" 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;">当前高度：{{bannerHeight}}</div>

方法解析：

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

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

代码：

 var app = new Vue({el: '#app',data() {return {bannerHeight:"",}},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";})}}})

效果展示：

小屏幕状态：

全屏状态：

完整代码：

<!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 :interval="5000" arrow="always" :height="bannerHeight+'px'" style="border: 1px solid red;"><el-carousel-item v-for="item in 4" :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="../image/banner1.png" 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;">当前高度：{{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>//注册使用vuevar Vue = window.Vue;var app = new Vue({el: '#app',data() {return {bannerHeight:"",}},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";})}}})</script></html>

element-ui走马灯实现图片自适应相关推荐

element ui走马灯怎么添加_Lovestu - Element UI 走马灯高度自适应
Element UI走马灯中,通过属性height来设置高度,但是设置就是死的,不能自适应.要自适应需要监控窗口宽度的变化. 网上别人分享的太复杂了,这儿有简单的方法实现高度自适应. 首先,确定图片的 ...
vue element ui 走马灯轮播图（简单几句话实现自动缩放效果）
实现效果 element ui 简单实现轮播图本文,中间叙述的是过程,完整代码在最后面. 最近在写公司官网,用的是element ui 走马灯组件写的轮播图,ui想要自动缩放的效果,如上视频.在这里 ...
element走马灯自动_vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
element走马灯自动_[转]vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
结合axios(formdata)+vue-cropper+element ui实现头像图片剪切上传
萌新用vue + axios + formdata 上传文件的爬坑之路 https://blog.csdn.net/qq_41688165/article/details/80834842 结合vue ...
解决Element UI 组件el-popover图片溢出屏幕可视区域问题（popover定位问题）
分析原因不固定popver大小,想让图片自适应完整显示时会出现这个情况. 原因:是图片未加载完成,即图片的宽高未确定,el-popover就已经初始化完成了,弹出的位置已确定.等图片加载完,内容撑开 ...
实现 element ui 走马灯图片插入与自适应大小
在进行这一模块开发的时候,走马灯组件不知道如何使用,还有大小的自适应.我就用官方给的参考文档来进行修改. 接下来是解决方案: //以下是官网组件代码 <template><el-ca ...
vue基于element ui走马灯卡片化的图片轮播
1.安装依赖 npm i element-ui -S 2.代码 <template><div><el-carousel :interval="4000" ...
element ui走马灯怎么添加_element-ui对话框与走马灯一起用
一.需求分析通过点击一组图片中的某一张图片,显示出当前的图片在对话框中,并可以通过走马灯的方式左右切换出其他图片,图片大小和对话框大小为自适应二.实现步骤 1.布局代码 :src="it ...

element-ui走马灯实现图片自适应

elementUI走马灯实现图片自适应（等比缩放，使得图片缩小不挤压，放大不拉伸变形）

element-ui走马灯实现图片自适应相关推荐

最新文章

热门文章