官方的文档只给了相对顶部的偏移量,而且是用px做单位的,对于不同手机出现的位置都不一样,自己试了一下给出现的div加了bottom的样式并且加了!important但是出现的信息框直接变得很长
3条回答 默认 最新
- Lazy33 2021-03-31 00:19关注
项目里面node_modules>element-ui>packages>message>src>main.js
刚才看了源码 58行开始
Message.close = function(id, userOnClose) { let len = instances.length; let index = -1; let removedHeight; for (let i = 0; i < len; i++) { if (id === instances[i].id) { removedHeight = instances[i].$el.offsetHeight; index = i; if (typeof userOnClose === 'function') { userOnClose(instances[i]); } instances.splice(i, 1); break; } } if (len <= 1 || index === -1 || index > instances.length - 1) return; for (let i = index; i < len - 1 ; i++) { let dom = instances[i].$el; dom.style['top'] = parseInt(dom.style['top'], 10) - removedHeight - 16 + 'px'; } }; Message.closeAll = function() { for (let i = instances.length - 1; i >= 0; i--) { instances[i].close(); } };
意思大概是 ,点击多次会有一个移动的距离,就是很多个message 是往下排列的 每次点击都会计算那个removeheight 如果你有设置X,点击X会关闭对应的message
下面属于我的猜测
本身组件有一个fixed定位,然后给的top默认是20,然后你再给个bottom 应为html是个松散型语言,你又给个顶部位移,还有底部位移,会不会在计算机看来就是给了个高度?
然后我做了一个测试,是一个纯html,没有框架的那种静态页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button style="position: fixed;top: 20px;bottom: 50px;">1111111</button> <script> </script> </body> </html>
就写了个button ,然后打开网页 果然不出所料 就是给了个高度
所以基本上就是在fixed的情况下,两者只能存在一个把
而且,源码是慢慢往下加高度的,你放在底下就是慢慢减高度的,还得去改源码。这种ui框架本来就是方便快速写代码的,这种提示类的,可以考虑换成样式 ,或者看看源码吧,有点晚了,源码我改不动了..
希望能帮到你
解决 1无用
悬赏问题
- ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
- ¥15 ubuntu系统下挂载磁盘上执行./提示权限不够
- ¥15 Arcgis相交分析无法绘制一个或多个图形
- ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
- ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
- ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
- ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
- ¥30 3天&7天&&15天&销量如何统计同一行
- ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
- ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型