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

_L...

已于 2024-03-25 12:15:19 修改

阅读量504

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 elementui

于 2022-10-12 19:12:35 首次发布

本文链接：https://blog.csdn.net/weixin_52624519/article/details/127287689

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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

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

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

解决：

　　在public下index.html页面中写入

body {
        /* 只写这个属性，会出现两个滚动条 */
        overflow-y: auto !important;
        /* 只写这个属性，当你打开dialog时，由于padding-right=0；页面宽度会大17px；dialog会抖动 */
        padding-right: 0 !important;
}