在页面内容较多，出现滚动条时使用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. java基础--常用函数总结

    java基础--常用函数总结 2019-3-16-23:28:01-----云林原创 1.split()字符串分割函数 将一个字符串分割为子字符串,然后将结果作为字符串数组返回. 2.Math.flo ...

  2. 记升级一次的http2学习

    首先,就先对比下http2和http1.X的区别和升级它的优势吧. 在 HTTP .X 中,为了性能考虑,我们会引入雪碧图.将小图内联.使用多个域名等等的方式.这一切都是因为浏览器限制了同一个域名下的 ...

  3. 前端（三大框架、Bootstrap，jQuery，自整理）

    前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...

  4. Eclipse One Inspector

    net.sf.yari.eclipse.EclipseInspectorViewPart Through the outline of EclipseInspectorViewPart, we can ...

  5. python str、int、dict

    一.str print(dir(int))#['__add__', '__class__', '__contains__', '__delattr__', '__dir__', '__doc__', ...

  6. 我的SublimeText配置

    我的SublimeText改键 [ /** * 我的改键 */ // f1控制中心:f2快速查找:f3查找下一个: { "keys": ["f1"], &quo ...

  7. Java中条件语句和if-else的嵌套原则

    if(condition)Statement 在此时的条件语句中的条件是需要用括号把它括起来.   其实,Java中的条件语句和C/C++中的是一样的.而Java常常希望在某个条件为真的时候执行多条语 ...

  8. 一、Python安装下载

    下载地址:https://www.python.org/downloads/ 因为Python3.X和2.X有部分不兼容,有些不向下兼容,现在3.5的资料和插件少,故我就学习的2.7.11了; 下载后 ...

  9. 卡方分布、卡方独立性检验和拟合性检验理论及其python实现

    如果你在寻找卡方分布是什么?如何实现卡方检验?那么请看这篇博客,将以通俗易懂的语言,全面的阐述卡方.卡方检验及其python实现. 1. 卡方分布 1.1 简介 抽样分布有三大应用:T分布.卡方分布和 ...

  10. *Amazon problem: 234. Palindrome Linked List (reverse the linked list with n time)

    Given a singly linked list, determine if it is a palindrome. Example 1: Input: 1->2 Output: false ...