定位问题 vue+element-ui+easyui(兼容性)
项目背景:靠近浏览器窗口的各个方向(左上、下、左、右)都有不同的模态框悬浮于窗口,这里针对于底部组件定位的选择(主要针对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(兼容性)的更多相关文章
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- vue+element ui 的tab 动态增减,切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
- 基于 vue+element ui 的cdn网站(多页面,都是各种demo)
前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...
- vue + element ui 阻止表单输入框回车刷新页面
问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...
- vue+element ui 的时间控件选择 年月日时分
前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...
随机推荐
- 移动web的基础知识
一.像素 px:CSS pixels逻辑像素,浏览器使用的抽象单位 dp,pt:设备无关像素 (物理像素) dpr:设备像素缩放比 计算公式: 1px = (dpr)*(dpr)*dp 二.viewp ...
- Directx11教程(35) 纹理映射(5)
原文:Directx11教程(35) 纹理映射(5) 到现在为止,我们的TextureClass初始化函数非常简单,说白了就是一行代码: result = D3DX11CreateShader ...
- WPF HTTP请求(GET,POST)
WPF HTTP请求(GET,POST) using System; using System.Collections.Generic; using System.IO; using System.L ...
- JDK 8 中包列表及介绍
了解了Java 8中所有包的作用,对Java 8有了一个整体的了解,另外也是提高了自身的阅读能力.本文列出了Java 8中所有的包,并且对每一个包的功能做了简要的说明,希望对你有所帮助. ------ ...
- BZOJ5259/洛谷P4747: [Cerc2017]区间
BZOJ5259/洛谷P4747: [Cerc2017]区间 2019.8.5 [HZOI]NOIP模拟测试13 C.优美序列 思维好题,然而当成NOIP模拟题↑真的好吗... 洛谷和BZOJ都有,就 ...
- js数组增删
1.shift() 2.pop() 3.push() 4.unshift() 5.splice(start,num,string...)
- ggplot2笔记
ggplot2笔记 下面是ggplot2的一些文档和github上的源代码http://docs.ggplot2.org/current/https://github.com/hadley/ggplo ...
- 容器化ICT融合初体验
[编者的话]本次将分享的容器化ICT融合平台是一种面向未来ICT系统的新型云计算PaaS平台,它基于容器这一轻量级的虚拟化技术以及自动化的"微服务"管理架构,能够有效支撑应用快速上 ...
- python 获取当前ip
import socket # 获取本机计算机名称 hostname = socket.gethostname() # 获取本机ip ip = socket.gethostbyname(hostnam ...
- 什么是实例化? 标签: vb 2015-02-08 20:26 1026人阅读 评论(30) 收藏
为什么要写这个博客呢?可能是因为自己的基础太差,昨天敲三层的注册,各层都敲完了以后,死活报错,无奈之下只能找晓婵求救,她只改了三个地方,犯了同一个错误,我的源码是这样写的:Dim uA As Ent ...