在页面内容较多，出现滚动条时使用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会抖动
　　}

element组件dialog关闭时Message消息提示抖动问题的更多相关文章

  1. 在vue项目中的main.js中直接使用element-ui中的Message 消息提示、MessageBox 弹框、Notification 通知

    需求来源:向后台请求数据时后台挂掉了,后台响应就出现错误,不做处理界面就卡住了,这时需要在main.js中使用axios的响应拦截器在出现相应错误是给出提示.项目使用element-ui,就调用里面的 ...

  2. Message 消息提示

    常用于主动操作后的反馈提示.与 Notification 的区别是后者更多用于系统级通知的被动提醒. 基础用法 从顶部出现,3 秒后自动消失. Message 在配置上与 Notification 非 ...

  3. element——message消息提示

    官方文档:http://element-cn.eleme.io/#/zh-CN/component/message 简单的用法,一句代码搞定.类型有success/warning/info/error ...

  4. 关于winform窗体关闭时弹出提示框，选择否时窗体也关闭的问题

    在窗体中有FormClosing这个事件,这个事件是在窗体关闭时候运行的.如果要取消某个事件的操作,那么就在该事件中写上e.Cancel=true就能取消该事件,也就是不执行该事件.所以,你要在窗体关 ...

  5. 【C#】无损转换Image为Icon 【C#】组件发布：MessageTip，轻快型消息提示窗 【C#】给无窗口的进程发送消息 【手记】WebBrowser响应页面中的blank开新窗口及window.close关闭本窗体 【手记】调用Process.EnterDebugMode引发异常：并非所有引用的特权或组都分配给呼叫方 【C#】DataRowState演变备忘

    [C#]无损转换Image为Icon 如题,市面上常见的方法是: var handle = bmp.GetHicon(); //得到图标句柄 return Icon.FromHandle(handle ...

  6. ymPrompt.js消息提示组件

    转载:https://www.cnblogs.com/linzheng/archive/2010/11/15/1878058.html 使用说明: 1.在页面中引入ymPrompt.js.如:< ...

  7. 关于Element对话框组件Dialog在使用时的一些问题及解决办法

    Element对话框组件Dialog在我们的实际项目开发中可以说是一个使用频率较高的组件,它能为我们展示提示的功能,如:业务模块提交前展示我们曾经输入或选择过的业务信息,或者展示列表信息中某项业务的具 ...

  8. 封装Vue Element的dialog弹窗组件

    我本没有想着说要封装一个弹窗组件,但有同行的朋友在问我,而且弹窗组件也确实在项目开发中用的比较多.思前想后,又本着样式统一且修改起来方便的原则,还是再为大家分享一个我所封装的弹窗组件吧. 其实,并不是 ...

  9. 【C#】组件发布：MessageTip，轻快型消息提示窗

    -------------201610212046更新------------- 更新至2.0版,基本完全重写,重点: 改为基于原生LayeredWindow窗体和UpdateLayeredWindo ...

随机推荐

  1. L1-002 打印沙漏 （20 分)

    L1-002 打印沙漏 (20 分) 方法:清晰思路,纸上写出实例,注意循环使用 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * ** ...

  2. XML再深入

    XML 命名空间 XML 命名空间提供避免元素命名冲突的方法. 使用前缀来避免命名冲突 在 XML 中的命名冲突可以通过使用名称前缀从而容易地避免. 该 XML 携带某个 HTML 表格和某件家具的信 ...

  3. Redis的Publish/Subscribe

    Publish/Subscribe 从字面上理解就是发布(Publish)与订阅(Subscribe),在Redis中,你可以设定对某一个key值进行消息发布及消息订阅,当一个key值上进行了消息发布 ...

  4. 自己用到的vim常用命令

    一.前言 这里整理的是我在实习期间用到的常用vim命令,特记录如下,以免忘记. 二.vim常用命令 1.vim中的光标移动 shift+6(^):跳到行首(第一个非空格字符)(注:在shell跳到行首 ...

  5. Windows 10：开机显示C:\WINDOWS\system32\config\systemprofile\Desktop不可用 的解决方法

    今晨起来开机,开完机一看,弹出啦一个框框上面写着“C:\WINDOWS\system32\config\systemprofile\Desktop不可用...” 当我点击了确定之后,发现屏幕一片黑,只 ...

  6. jquery获取不了ajax动态添加的内容的解决办法

    在HTML页面的一个button <div class="ajaxClick"> <button>内容</button> </div> ...

  7. android Viewpager取消预加载及Fragment方法的学习

    1.在使用ViewPager嵌套Fragment的时候,由于VIewPager的几个Adapter的设置来说,都会有一定的预加载.通过设置setOffscreenPageLimit(int numbe ...

  8. android 5.0 下载编译

    CM的CM-12.0版本(对应Android5.0.2): $ repo init -u https://github.com/CyanogenMod/android.git -b cm-12.0 注 ...

  9. 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API

    使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...

  10. win7 下vs2008试用版破解

    用过微软的开发套件Visual Studio 2008,如果用的是试用版本,超过90天,就会过期,出现下面这张图片显示的 下面介绍破解的步骤: 1.首先打开控制面板——然后找到卸载或更改程序——然后找 ...