在页面内容较多,出现滚动条时使用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. javascript的对象创建模式---命名空间模式

    javascript中对象的概念是很普遍的,对象是是对象,数组是对象,函数也是对象,字符串其实也是对象.常见的对象创建方法有对象字面量.构造函数创建.我们先来看看对象的创建还有哪些更高级的模式. 一. ...

  2. js如何设置一个倒计时

    //申明一个定时器 let endInterval; //结束时间(毫秒数,这里是距离 1970 年 1 月 1 日至今的毫秒数) let endSeconds; //结束时间差 const ENDT ...

  3. Fragstats:使用R软件读取frag78b.asc文件

    Fragstats中,有一个用于熟悉Fragstats软件的demon,在tutorial中的1种,有reg78b.asc文件,其文件内容是包含了山歌图像的行数和列数以及分辨率大小等基本信息. 采用R ...

  4. maven学习(二)maven常用的命令

    参考博客:(http://blog.csdn.net/keda8997110/article/details/20925449) 以下命令都是基于命令行的操作,也可以直接在eclipse等IDE上ma ...

  5. spring----对IoC和DI的理解

      学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和 ...

  6. sql字段合并与分组聚合

    http://blog.csdn.net/cuixianlong/article/details/74024846 1 字段合并 原始数据如下:表名为Employee ID FirstName Las ...

  7. PB调用C#编写的DLL

    C#以其简单易用,功能强大深受大家喜爱.PowerBuilder作为C/S的MIS开发工具,十分简单灵活,开发时间短,开发及维护成本低,一直是中小企业信息管理系统的首选开发工具.但是PB的局限性限制了 ...

  8. 【java开发系列】—— Tomcat编译报错

    由于之前Eclipse里面有一个可移植性的web工程,但是在我很久没用后,再次登录这个IDE的时候就发现了问题. 首先,我的电脑里面有两个版本的JDK,1.6和1.7.两个版本的Tomcat6和7以及 ...

  9. 三个方法教会你win7中IIS7配置php环境

    三个方法教会你win7中IIS7配置php环境.今天静下心来研究了下在win7中使用IIS7配置php环境,其实很简单!跟下面方法做之前,请先确定你的电脑中未安装其它相关环境程序及服务,之前安装过ap ...

  10. 利物浦VS曼城,罗指导的先手与工程师的后手

      本想『标题党』一下的,『高速反击遭遇剧情反转,巴西人力挽狂澜绝处逢生!』这种好像看起来比较厉害的标题似乎在大战之后的第五天已显得不合适了. /不害臊    反正晚了,干脆写点能够引起讨论.并且在未 ...