element-ui走马灯如何实现图片自适应 长度和高度 自适应屏幕大小

摘要:
),结果用了发现一个问题,element的组件走马灯,高度是固定的,页面缩小会有空隙。

最近写用vue2.0写一个项目,用到了走马灯效果,由于项目赶时间,想偷下懒,第一次引用了element组件(纯JS也可以写的出来,赶时间嘛,懂得。。。。),结果用了发现一个问题,element的组件(Carousel) 走马灯,高度是固定的,页面缩小会有空隙。网上查了一大堆资料,都说的不全面,要么报错,要么根本无法实现。浪费了大半天时间,还不如JS写的快,既然碰到了,还是想解决掉。。。。。。其实官网给了一个height属性,根本改不了,改成atuo,100%,都不行,屏幕变大变小都会有间隙

element-ui走马灯如何实现图片自适应 长度和高度 自适应屏幕大小第1张

最后还是解决了,其实也简单,就是监听屏幕视口大小如果'resize',发生改变了,就获取图片的高度height,然后渲染到页面,方法如下:

ref:
ref 有三种用法:

1、ref 加在普通的元素上,用this.ref.name 获取到的是dom元素

2、ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法。

3、如何利用 v-for 和 ref 获取一组数组或者dom 节点
element-ui走马灯如何实现图片自适应 长度和高度 自适应屏幕大小第2张

element-ui走马灯如何实现图片自适应 长度和高度 自适应屏幕大小第3张

窗口第一次打开,加载了imgLoad()方法,第一次获取图片在视口中的高度,然后渲染到页面
接下来通过addEventListenner()方法监听视口是否发生改变,如果发生改变,重新调用imgLoad()方法渲染数据到页面,这样图片高度就可以随视口改变发生改变,适应各种大小屏幕。

element-ui走马灯如何实现图片自适应 长度和高度 自适应屏幕大小第4张

为了使大家看的清楚,把代码贴上

element-ui走马灯如何实现图片自适应 长度和高度 自适应屏幕大小第5张

element-ui走马灯如何实现图片自适应 长度和高度 自适应屏幕大小第6张

最后成功的效果图:不管屏幕多大,多小,都没有空隙。

免责声明:文章转载自《element-ui走马灯如何实现图片自适应 长度和高度 自适应屏幕大小》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Android字符串相关类转载:ORA-01438: 值大于为此列指定的允许精度下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

CSS(十一)-- 手机像素

目录 1.像素css像素:编写网页时,我们所用像素都是css像素 2.视口: 3.移动端的像素 3.1完美视口通过视口来调整像素比 3.2手机端元素布局 使用vw(视口宽度)来布局 使用rem来布局 页面的设计图像素设置 1.像素 屏幕是由一个一个发光的小点构成,这一个个小点就是像素 分辨率:1920*1080 说的是屏幕...

IFrame自适应大小(全屏已实现)

近日做项目中用到页面中嵌套iframe,想要实现自适应大小,并且在IE中按F11键全屏时也可以自适应大小。 在网上搜来的代码多数只适应页面中只有单个iframe情况,但笔者页面还有一个logo图片。 经反复实现,如下代码可实现: <html> <html> <head> <meta http-equiv="Cont...

vue项目使用自适应布局投屏到物理拼接屏变形的处理

这段时间,一直在做一个大屏项目,它的需求是:物理屏幕(LED拼接屏)的分辨率为:6720*2160,大屏页面需满足:通过屏幕分辨率为1920*1080的PC的浏览器访问IOC大屏,接HDMI线投屏后,物理大屏可被填满,显示分辨率为6720*2160,不会出现图像拉伸或压缩。 有了几个大屏经验的我们,直接就选择了vue+element ui 来做这个项目,另...

react 中echarts-for-react使用 自适应div

import * as React from 'react' import ReactEcharts from 'echarts-for-react' export interface IProps { } interface IState { } class CapitalBudget extends React.Component<...

实现JTable的列宽与内容的自适应

 JTable默认的各列宽度平均,下函数可以实现各列宽度与内容长度适应!来自互联网~ 1 public void FitTableColumns(JTable myTable){ 2 JTableHeader header = myTable.getTableHeader(); 3 int rowCount = myTable.getR...

iframe高度动态自适应

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1294 一、前言碎碎念 我从来对iframe就没有什么好感,对其基本上是不屑一顾。但是人在江湖,身不由己。经理发话,新功能使用iframe实现,没办法,只好折腾,两大烦人的东西,一...