【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug

简介: 【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug

问题

问题描述:el-dialog弹窗没打开时,页面有滚动条,会占据浏览器右侧15px左右的宽度。

dialog打开之后,遮罩层占整个浏览器的宽度,且没有滚动条。网页头部滚动条消失,导致网页头

部向右移动15px左右。每次打开dialog网页头部就向右移动;关闭dialog网页头部就向左移动。直接影响美观。由于遮罩层的出现,导致页面的滚动条隐藏,从而使页面出现闪动的效果。

解决

在main.js中写上就好了。

// 引入element组件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 弹出框的时候滚动条隐藏和出现导致页面抖动问题
ElementUI.Dialog.props.lockScroll.default = false;
Vue.use(ElementUI)


main.js中设置:给element-ui中的Dialog组件的原型中的滚动默认关闭就好了。

下班~

目录
相关文章
|
API UED 容器
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
在这篇博客中,我们将深入探讨 Element UI 中的自定义滚动条及弹出层管理技巧。文章详细介绍了 el-scrollbar 组件的使用和参数设置,以及 PopupManager 如何有效管理弹出层的 z-index。我们还将探讨如何实现灵活的全屏组件,利用 vue-popper 创建自定义弹出层,最后介绍 ClickOutside 指令的用法。这些高级技巧将帮助你提升 Element UI 应用程序的用户体验与交互灵活性。
1518 1
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
|
JavaScript
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
704 1
element UI【解决方案】消息弹框被对话框遮挡($message消息框被dialog或$alert遮罩)
element UI【解决方案】消息弹框被对话框遮挡($message消息框被dialog或$alert遮罩)
868 3
|
前端开发
css 实用技巧 —— 永远居中的弹窗
css 实用技巧 —— 永远居中的弹窗
112 2
|
Web App开发 前端开发 iOS开发
如何使用CSS样式化滚动条
如何使用CSS样式化滚动条
159 0
【UI】elementui el-pagination分页位置靠右
【UI】elementui el-pagination分页位置靠右
706 0
|
前端开发 JavaScript
vue 自定义气泡弹窗 $pop (内含css晃动动画shake制作)
vue 自定义气泡弹窗 $pop (内含css晃动动画shake制作)
225 0
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
2773 0
|
9月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
303 15
|
9月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
342 11