项目背景:靠近浏览器窗口的各个方向(左上、下、左、右)都有不同的模态框悬浮于窗口,这里针对于底部组件定位的选择(主要针对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作为单位,解决了不同大小屏幕的准确定位以及不用二次刷新的问题!

定位问题 vue+element-ui+easyui(兼容性)的更多相关文章

  1. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  2. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

  3. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  4. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  5. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  6. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  7. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  8. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  9. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

  10. vue+element ui 的时间控件选择 年月日时分

    前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...

随机推荐

  1. 【JZOJ4771】【NOIP2016提高A组模拟9.9】爬山

    题目描述 国家一级爬山运动员h10今天获得了一张有着密密麻麻标记的地图,在好奇心的驱使下,他又踏上了去爬山的路. 对于爬山,h10有一个原则,那就是不走回头路,于是他把地图上的所有边都标记成了有向边. ...

  2. 七.Deque的应用案例-回文检查

    - 回文检测:设计程序,检测一个字符串是否为回文. - 回文:回文是一个字符串,读取首尾相同的字符,例如,radar toot madam. - 分析:该问题的解决方案将使用 deque 来存储字符串 ...

  3. 大数据技术之Hadoop入门

      第1章 大数据概论 1.1 大数据概念 大数据概念如图2-1 所示. 图2-1 大数据概念 1.2 大数据特点(4V) 大数据特点如图2-2,2-3,2-4,2-5所示 图2-2 大数据特点之大量 ...

  4. Python Unittest根据不同测试环境跳过用例详解

    虽然现在用的Katalon,不过这篇Unittest基本的用法讲的还是不错的 转自:https://mp.weixin.qq.com/s/ZcrjOrJ1m-hAj3gXK9TjzQ 本文章会讲述以下 ...

  5. MUI - 封装localStorage与plus.storage

    MUI - 封装localStorage与plus.storage 2.0版本 在使用plus.storage频繁地存取数据时,可以感觉到明显的卡顿,而且很耗内存, 在切换到localstorage时 ...

  6. UVA_445:Marvelous Mazes

    Language:C++ 4.8.2 #include<stdio.h> #include<string.h> #include<ctype.h> int main ...

  7. Linux的 crontab定时任务小记

    编辑任务 crontab -e 查看任务 crontab -l 任务配置基本格式:*   * * * * command分(0-59) 时(0-23) 天(1-31) 月(1-12) 周(0-6,0代 ...

  8. find 使用搜集

    find:-atime +n/-n:表示访问或执行时间大于或小于n天的文件-ctime +n/-n:表示写入.更改inode属性的时间大于或小于n天的文件-mtime +n/-n:表示写入时间大于或小 ...

  9. java代码简单实现栈

    1. 基于数组简单实现 /** * @author <a herf="mailto:yanwu0527@163.com">XuBaofeng</a> * @ ...

  10. Java练习 SDUT-1131_最大公约数与最小公倍数

    C/C++训练1---最大公约数与最小公倍数 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 输入两个正整数,求它们的最 ...