vue实现长图垂直居上 vue实现短图垂直居中
更新时间:2017年10月18日 14:14:19 作者:云行月翔
这篇文章主要为大家详细介绍了vue弹性布局实现长图垂直居上,vue实现短图垂直居中,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
大致效果如下图,只考虑垂直方向。长图可以通过滚动条看,短图居中效果,布局合理
html代码(vue作用域内):
<div class="box" v-for="item in previewImg"> <img :src="item" alt="" @load="checkHeight($event)"> </div>
css代码:
.box{ height: 100%;//如高度等于网页高度 overflow: auto; display: flex; flex-direction: column; justify-content: space-around; } .swiper-slide.long{ justify-content: flex-start; }
js代码(vue作用域内,使用jquery):
methods: { checkHeight:function (event) { var el=$(event.currentTarget); el.parent().removeClass('long'); //this.CH 为网页高度 if(el.height()>this.CH){ el.parent().addClass('long'); } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
从0搭建Vue3组件库如何使用 glup 打包组件库并实现按需加载
这篇文章主要介绍了从0搭建Vue3组件库如何使用 glup 打包组件库并实现按需加载,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-03-03vue 基于abstract 路由模式 实现页面内嵌的示例代码
这篇文章主要介绍了vue 基于abstract 路由模式 实现页面内嵌的示例代码,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下2020-12-12Vue实现在线预览pdf文件功能(利用pdf.js/iframe/embed)
项目要求需要预览pdf文件,网上找了很久,发现pdf.js的效果,这篇文章主要给大家介绍了关于Vue实现在线预览pdf文件功能,主要利用pdf.js/iframe/embed来实现的,需要的朋友可以参考下2021-06-06vue axios调用接口方法报错500 internal server err
前端使用axios 访问后端接口时报错,在浏览器中点击红色的报错数据,本文给大家分享vue axios调用接口方法报错500 internal server error的两种解决方法,感兴趣的朋友一起看看吧2023-10-10使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例
这篇文章主要给大家介绍了关于使用vue3+ts+setup获取全局变量getCurrentInstance的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下2022-08-08
最新评论