解决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 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
javascript中的一些注意事项 更新中
2010/12/06 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
详解在React里使用"Vuex"
2018/04/02 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
用Python写的图片蜘蛛人代码
2012/08/27 Python
Python实现控制台输入密码的方法
2015/05/29 Python
Python 实现简单的电话本功能
2015/08/09 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
Django异步任务线程池实现原理
2019/12/17 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
十佳大学生村官事迹
2014/01/09 职场文书
电子信息工程自荐信
2014/05/26 职场文书
二人合伙经营协议书
2014/09/13 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
SpringBoot 集成Redis 过程
2021/06/02 Redis
Python实现老照片修复之上色小技巧
2021/10/16 Python
Python+Tkinter打造签名设计工具
2022/04/01 Python