Taku basutou 2021-03-30 21:14 采纳率: 33.3%
浏览 1513

Element ui Message组件如何设置相对于底部的位置

官方的文档只给了相对顶部的偏移量,而且是用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框架本来就是方便快速写代码的,这种提示类的,可以考虑换成样式 ,或者看看源码吧,有点晚了,源码我改不动了.. 

    希望能帮到你

    评论

报告相同问题?

悬赏问题

  • ¥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 飞机曲面部件如机翼,壁板等具体的孔位模型