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会抖动
}