解决el-dialog弹出时,页面抖动,右侧会缩小的问题(即滚动条被遮罩层覆盖的问题)

这篇具有很好参考价值的文章主要介绍了解决el-dialog弹出时,页面抖动,右侧会缩小的问题(即滚动条被遮罩层覆盖的问题)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题描述:

在弹出el-dialog时,会发现弹出框弹出时,页面会抖动,滚动条被遮罩层覆盖直接没有滚动条了,导致页面缩小了几个像素点(滚动条的宽度);体验感不好,会影响到页面的布局,且页面有的fixed定位的内容也会随着遮罩层的出现移动几个像素点;
后来我找了一下页面具体样式变化,发现弹框在出现时,会对页面的滚动条进行处理,给body增加额外的样式类;可以找到样式类重写,方法1,但是容易影响页面整体不急,不推荐。更直接的办法参考 方法2,直接不让遮罩层罩盖滚动条,滚动条正常展示,但是这样的话即使有遮罩层用户也能正常拉动滚动条;文章来源地址https://www.toymoban.com/news/detail-627032.html

解决方法:

方法1

  1. 在全局设置 body 的 padding-right: 0 !important;不推荐,虽然可以解决问题,但是影响了页面的布局效果;

方法2

  1. main.js中,找到引入element的地方,举个例子
import Element from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
 
Element.Dialog.props.lockScroll.default = false;

到了这里,关于解决el-dialog弹出时,页面抖动,右侧会缩小的问题(即滚动条被遮罩层覆盖的问题)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • el-dialog嵌套,修改内层el-dialog样式(自定义样式)

    el-dialog嵌套使用时,内层的el-dialog要添加 append-to-body 属性 给内层的el-dialog添加 custom-class 属性,添加自定义类名 然后使用 不带scoped的style标签 ,书写格式如下: 就可以对其样式进行修改了  大功告成! -------------------------------------------------手动分割线-------------------------------------

    2024年02月13日
    浏览(56)
  • element UI组件库el-dialog内程序刷新el-dialog内组件方法

    1、牢牢记住,vue是基于JavaScript ES6的,所以只要刷新页面里面data下的数据,页面会自动刷新的。 所以这个数据是父页面传给el-dialog的,要刷新父页面的数据,el-dialog页面内的组件就可以刷新了。 2、在页面的组件处理后台程序完成后,可以调用 that.$parent.$parent.【父页面的方

    2024年02月13日
    浏览(43)
  • 解决element UI中 select下拉框 el-select-dropdown el-popper超出el-dialog弹框的问题

    【问题】: 在elementUI 中,el-dialog的内容比较多,出现滚动条,且内容包含input输入框、select下拉框、时间选择器、cascader级联选择器等,在点开select下拉选择框后并向下滚动鼠标,会出现下拉框跑出el-dialog的区域的情况(有可能离el-dialog的区域很远),造成页面的展示效果混

    2024年02月09日
    浏览(57)
  • el-dialog无法关闭

     代码如下,:visible.sync=\\\"result2DeptVisible\\\"来控制dialog的隐显问题,但当点击关闭的时候 ,无法关闭!! 检查了一下data属性如下: 原来是data中没有定义 result2DeptVisible属性导致的。添加result2DeptVisible:false即可。   总结:dom页面上使用的变量尽量按照要求在data中进行定义避免出

    2024年02月09日
    浏览(37)
  • el-dialog固定高度

    el-dialog默认高度是自由拉伸的,当内容超过屏幕时会出现滚动条,按钮和标题都会随着滚动,用户体验不好。 如下图 现在要实现一种窗口高度固定,内容滚动的方式,如下直接在内容上套一层div并加上自定义样式el-dialog-div 效果如下

    2024年02月12日
    浏览(37)
  • 当element ui el-dialog弹窗有缓存,每次打开弹窗的时候会出问题的解决方法

    解决方法: 如下是解决方案。用el-dialog 里面有一个 destroy-on-close (关闭时销毁 Dialog 中的元素)这个完全没用。其实很简单。只需要在 el-dialog 外层加一层div 然后在 div 上写上 v-if=\\\"dialogVisible\\\"就行了。 理解: 也就是说,当显示参数 dialogVisible = true 时,先创建 el-dialog 组件,

    2024年02月04日
    浏览(50)
  • elementui 修改el-dialog样式

    方案一、(如果添加append-to-body属性,则此方案不生效)               在el-dialog外层添加一个父盒子比如class=\\\'batch-box\\\',然后在style scoped中用::v-deep();     具体代码如下:                .batch-box{                    ::v-deep(.el-dialog__body){                          max

    2024年02月16日
    浏览(48)
  • VUE宝典之el-dialog使用

    el-dialog是Element UI库中的一个重要组件,用于在Vue应用程序中创建弹出框。它提供了一组实用的属性和事件,让我们能够轻松地实现各种弹出框功能。本文将详细介绍el-dialog组件的使用方法和示例,帮助您更好地理解如何在实际项目中使用它。 el-dialog是一个非常灵活的弹出框

    2024年02月04日
    浏览(41)
  • el-dialog对话框子组件的关闭

    在子组件对话框中 用:before-close关闭对话框,取消按键绑定点击事件 子组件把\\\"close\\\"事件传给父组件  父组件中@close接收子组件传来的“close”事件 

    2024年02月12日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包