博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
定位问题 vue+element-ui+easyui(兼容性)
阅读量:4322 次
发布时间:2019-06-06

本文共 792 字,大约阅读时间需要 2 分钟。

项目背景:靠近浏览器窗口的各个方向(左上、下、左、右)都有不同的模态框悬浮于窗口,这里针对于底部组件定位的选择(主要针对pc端垂直方向上的定位)

1、百分比:easyui的window窗口定位方式:设置left和top的值即可;(left可直接写指定值px;top不能写px,因为各个分辨率下的浏览器窗口距离上面的值是不固定的。考虑到此top值写成百分数,原以为百分数可以解决此问题了,结果在不同屏幕大小的浏览器窗口中依然有细微差距)

 

2、js:easyui的window窗口只能设置left和top的值,然而top值不好设置,于是想到使用js获取当前浏览器窗口的可见高度,再使用该高度减去操作元素的高度,不就能具体定位垂直方向上的位置了?

 

created() {
var bodyheight = Number(document.body.clientHeight); //浏览器可见窗口的高度   var bodywidth = Number(document.body.clientWidth);//浏览器可见窗口的宽度
console.log(bodyheight);    //this.win.top=bodyheight-60;(60为被操作组件的高度) },
用以上方法确实可以做到垂直方向上的指定定位,且兼容pc端不同屏幕大小。但是新的问题出现: 当改变当前浏览器窗口大小时,使用该方法实现定位的组件位置偏移得离谱,需要刷新当前窗口,才能恢复到正常状态!(效果达到了,但是用户体验极差,这样肯定不行)

3、使用定位:position:fixed/absolute;设置bottom的值,且使用px作为单位,解决了不同大小屏幕的准确定位以及不用二次刷新的问题!

 

转载于:https://www.cnblogs.com/LindaBlog/p/11158870.html

你可能感兴趣的文章
CKplayer:视频推荐和分享插件设置
查看>>
CentOS系统将UTC时间修改为CST时间
查看>>
redis常见面试题
查看>>
导航控制器的出栈
查看>>
玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]
查看>>
iOS 9音频应用播放音频之播放控制暂停停止前进后退的设置
查看>>
Delphi消息小记
查看>>
JVM介绍
查看>>
将PHP数组输出为HTML表格
查看>>
经典排序算法回顾:选择排序,快速排序
查看>>
BZOJ2213 [Poi2011]Difference 【乱搞】
查看>>
一道关于员工与部门查询的SQL笔试题
查看>>
Canvas基础
查看>>
[Hive - LanguageManual] Alter Table/Partition/Column
查看>>
可持久化数组
查看>>
去除IDEA报黄色/灰色的重复代码的下划波浪线
查看>>
Linux发送qq、网易邮件服务配置
查看>>
几道面试题
查看>>
【转】使用 WebGL 进行 3D 开发,第 1 部分: WebGL 简介
查看>>
js用正则表达式控制价格输入
查看>>