element组件dialog关闭时Message消息提示抖动问题

在页面内容较多,出现滚动条时使用element组件里的dialog组件,当关闭dialog组件的同时弹出Message消息提示时,Message会抖动一下。

在页面有滚动条的情况先打开dialog时,dialog会给页面的<body></body>添加一个class类名和一个style样式,如图:

overflow这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制

所以当dialog关闭而Message弹出的瞬间,body由于失去overflow属性和padding-right属性页面宽度会小17px,因为Message是居中的所以会往左面抖一下

解决:

  在app.vue页面中写入

  body {
    overflow-y: auto !important;  //只写这个属性,会出现两个滚动条
    padding-right: 0 !important;  //只写这个属性,当你打开dialog时,由于padding-right=0;页面宽度会大17px;dialog会抖动
  }
posted @ 2018-08-23 18:06  妖色调  阅读(914)  评论(0编辑  收藏  举报