解决layer弹出层自适应页面大小的问题


Posted in Javascript onSeptember 16, 2019

前两天在Vue中引入了Vue-layer插件,实现了弹出层效果。不过由于是在22寸屏下开发的,没多想,弹出层的area的长宽就设定的都是800px,效果还很好。结果那给用户看,他们是12寸的笔记本。弹出层直接撑爆了页面,无法关闭。。。

网上的解决方案大都是以下几种:

1、改成百分比形式。有bug,下面细说。

2、改成em,rem等。同上

3、采用area:auto。可能是因为采用了swiper的原因吧,这样设置会导致弹出层出现“顶天立地”的效果

4、采用iframeAuto。这个没太搞懂怎么用,而且网上查的资料,很多人都反映不能用。

5、根据当前页面高度计算好以后,再填入高度。这应该是最优解,但是有点麻烦。

尝试了很多办法,都无法实现想要的效果,最后没办法,只能去研究为什么百分比和rem这种形式会有bug。

这个bug的效果是,虽然弹出窗按比例展示了,但是里面包含的一个div的由于高度很小,导致看不到任何内容。查看网页代码,很容易就找到出问题的所在,这个div的height只有50px,不知道怎么会这样。

估摸着应该是js文件计算高度是出错了。这个div的id是vlip1545899541487,猜测应该是一个固定前缀加了随机数。只查找vlip,在vue-layer.js中果然找到了相应的代码

id:"vlip"+(new Date).getTime()

id是vlip加时间戳生成的,然后再往后看,就会发现问题所在

{return{height:parseInt(this.options.area[1])-50+"px",minHeight:"inherit",overflow:"auto"}}}

直接去area的第二个参数转成int值减去50再加上后缀“px”,所以假如我们配了80%的高度,最终的height只有30px。。。

所以只要把这里的生成代码略加改动就好。

{return{height:this.options.area[1].indexOf("%")>=0?"90%":parseInt(this.options.area[1])-50+"px",minHeight:"inherit",overflow:"auto"}}}

增加三目运算符,判断如果包含%的话,就写死一个值90%。其实这样不算完美,因为不同尺寸的显示屏,90%所展示的效果都不太一样。但是这样比较省事。

以上这篇解决layer弹出层自适应页面大小的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
js判断是否是手机页面
Mar 17 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
js校验开始时间和结束时间
May 26 Javascript
JavaScript动态生成表格的示例
Nov 02 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 #Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 #Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 #Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 #Javascript
Layui点击图片弹框预览的实现方法
Sep 16 #Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 #Javascript
layui异步加载table表中某一列数据的例子
Sep 16 #Javascript
You might like
基于PHP异步执行的常用方式详解
2013/06/03 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
Python  连接字符串(join %)
2008/09/06 Python
用实例解释Python中的继承和多态的概念
2015/04/27 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
实习生自我鉴定范文
2013/12/05 职场文书
班主任工作年限证明
2014/01/12 职场文书
有关打架的检讨书
2014/01/25 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
社区义诊活动总结
2014/04/30 职场文书
党员十八大心得体会
2014/09/12 职场文书
五年级学生期末评语
2014/12/26 职场文书
小鞋子观后感
2015/06/05 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js