Vue - 关于el-dialog 会让body 标签内的滚动条隐藏,导致窗口抖动的问题 和双滚动条问题

news2024/12/23 18:53:15

问题:

关于el-dialog 会让body 标签内的滚动条隐藏,导致窗口抖动的问题

抖动问题

抖动问题就不演示了,很简单,按如下配置就能解决:
在这里插入图片描述

双滚动条问题演示:

在这里插入图片描述

双滚动条解决效果演示:

在这里插入图片描述

解决方法:

笔者在这里解决这两种问题的解决方法如下:(注意笔者这里是两个问题一起先后出现的)

1、 解决窗口抖动问题

<el-dialog
  :title="formTitle"
  :visible.sync="dialogFormVisible"
  :lock-scroll="false"  //主要是这个属性
  :append-to-body="true"   //跟这个属性
  :close-on-click-modal="false"
>
</el-dialog>

2、解决双滚动条问题

.el-dialog {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  overflow-y: scroll !important;
  max-height: 99vh !important;
}

参考链接

1. Element-UI模态框会话框弹框dialog出现滚动条,再次点击无法置顶滚动条的解决方法

2. ialog弹出,点确定,页面隐藏滚动条,导致页面和message弹框抖动

3. element-plus:el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/649395.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

这几款实用的软件建议试一下

软件一&#xff1a;减肥计算器 「减肥计算器」是一款帮助用户进行减肥的专业工具。该工具提供了多种功能&#xff0c;包括计算BMI和卡路里、指定减肥目标以及个性化饮食建议等&#xff0c;帮助用户制定科学合理的减肥计划&#xff0c;并实现减重目标。 首先&#xff0c;「减肥…

Linux进程间通信 - 匿名管道(1)

之间我们学习了基础IO中有关文件&#xff0c;动静态库等知识&#xff0c;后面我们将讲述进程间通信的内容&#xff0c;在本文中就将来展示匿名管道。 进程间通信 进程间通信的目的 数据传输&#xff1a;一个进程需要将它的数据发送给另一个进程资源共享&#xff1a;多个进程…

Java低代码开发工具:jvs-rules 2.1.8 新版本功能清单

规则引擎用于管理和执行业务规则。它提供了一个中央化的机制来定义、管理和执行业务规则&#xff0c;以便根据特定条件自动化决策和行为。规则引擎的核心概念是规则。规则由条件和动作组成。条件定义了规则适用的特定情况或规则触发的条件&#xff0c;而动作定义了规则满足时要…

载誉而归丨盐城卓晨中心在第十届“北大青鸟杯”IT精英挑战赛中斩获多项殊荣!

2023年6月13日&#xff0c;第十届“北大青鸟杯”全国IT精英挑战赛华东&华中区域评审在合肥圆满落幕&#xff0c;当天下午&#xff0c;喜讯传来&#xff0c;北大青鸟盐城卓晨中心在此次比赛中摘得多项荣誉&#xff0c;包揽一、二、三等奖及优秀指导老师奖项&#xff0c;荣耀…

【Vue】学习笔记-VueRouter replace 编程式导航 缓存路由组件

VueRouter replace 编程式导航 缓存路由组件 路由跳转的replace方法编程式路由导航(不用<router-link>)缓存路由组件 路由跳转的replace方法 作用&#xff1a;控制路由跳转时操作浏览器历史记录的模式浏览器的历史记录有两种写入方式:push和replace push 是追加历史记录…

IntelliJ IDEA 2023.1中新的UI增强,加强了IDE编码体验!

IntelliJ IDEA&#xff0c;是java编程语言开发的集成环境。IntelliJ在业界被公认为最好的java开发工具&#xff0c;尤其在智能代码助手、代码自动提示、重构、JavaEE支持、各类版本工具(git、svn等)、JUnit、CVS整合、代码分析、 创新的GUI设计等方面的功能可以说是超常的。 去…

专家意见何处寻:AI扮演领域专家角色为你答疑解惑

当我们寻求意见或建议时&#xff0c;ChatGPT是一个非常有用的工具。 作为通用的语言模型&#xff0c;ChatGPT 可以提供关于各种话题的建议和意见&#xff0c;如日常生活、工作、学习、人际关系、心理健康、科技和互联网、旅行和休闲、财务和投资、健康和医疗&#xff0c;以及环…

同事用python搞副业,失业了也能月入1W

今年2月&#xff0c;我失业了。好在是被裁的&#xff0c;有些补偿。裁的是整个部门&#xff0c;刚开始拿到赔偿以后还欢呼雀跃&#xff0c;天天聚会&#xff0c;天天嗨。到现在过去几个月了&#xff0c;我们没一个找到工作。我已经感受到了一股鸡蛋被煎糊的焦虑感 一次前同事聚…

新方案登场!“软硬兼施”让光伏组件焊接检测更高效

焊接是光伏组件生产中重要的工艺流程&#xff0c;就拿光伏组件中常见的组成部分——接线盒来举例&#xff0c;作为完成组件电力传输的关键器件&#xff0c;在组件的自动化生产过程中&#xff0c;接线盒的电极焊接质量直接关乎组件的性能&#xff0c;焊接质量检测的重要性不言而…

Dubbo简介和配置

1.Dubbo和OpenFeign的简介 Dubbo一个高性能rpc框架&#xff0c;用于构建分布式微服务架构&#xff0c;它提供了服务注册与发现&#xff0c;负载均衡&#xff0c;容错机制等功能。Dubbo具有高性能和低延迟的特点&#xff0c;适合于大规模的分布式系统。OpenFeign一个基于Java的…

Vue中如何进行屏幕录制与直播推流

Vue中如何进行屏幕录制与直播推流 屏幕录制和直播推流是现代Web应用中常用的功能&#xff0c;例如在线教育、视频会议和游戏直播等。Vue作为一种流行的JavaScript框架&#xff0c;提供了一些工具和库&#xff0c;可以方便地实现屏幕录制和直播推流功能。本文将介绍如何在Vue中…

解锁高效word开发!Word控件Aspose.words for.NET介绍

Aspose.Words 是一种高级Word文档处理API&#xff0c;用于执行各种文档管理和操作任务。API支持生成&#xff0c;修改&#xff0c;转换&#xff0c;呈现和打印文档&#xff0c;而无需在跨平台应用程序中直接使用Microsoft Word。 Aspose API 支持流行文件格式处理&#xff0c;…

hard fault on thread: mqtt0解决办法

rt thread版本4.1.0 使用paho mqtt软件包 运行一段时间后出现 psr: 0x21000000 r00: 0x5036fc8f r01: 0x5036fc88 r02: 0x00000000 r03: 0x5036fc8f r04: 0x00000007 r05: 0x00000063 r06: 0x00005f70 r07: 0x2001f1d8 r08: 0xdeadbeef r09: 0xdeadbeef r10: 0xdeadbeef r11…

如何知道mysql是否有设置密码

可以通过以下几种方式知道MySQL是否设置了 root 用户的密码: 1. 尝试使用root用户登录MySQL 打开终端窗口,运行以下命令尝试使用root用户登录MySQL: bash mysql -u root -p如果显示MySQL提示符mysql>,则说明没有为root用户设置密码。 如果提示输入密码,说明root用户已设置…

Aviator源码:Aviator表达式引擎执行过程源码分析

目录 1.if执行脚本示例 2.源码分析 2.1 compile执行过程 2.1.1 CodeGenerator 2.1.2 ExpressionParser 2.1.3 if脚本ASM反编译结果 2.2 compiledExpression.execute执行过程 3.总结概述 由于Aviator支持的脚本语法较多&#xff0c;下面通过项目中使用较多的if语句来对a…

tinyWebServer 学习笔记——六、注册登录

文章目录 一、基础知识二、代码解析1. 载入数据库表2. 提取用户名和密码3. 同步线程登录注册4. 页面跳转 参考文献 一、基础知识 流程图 [1] 二、代码解析 1. 载入数据库表 // 用户名和密码 map<string, string> users;// 初始化数据库 void http_conn::initmysql_resu…

关于 Spring 中事务的嵌套,你了解多少?

Spring事务的的详细理解&#xff0c;事务嵌套解析&#xff0c;以及事务失效的场景解惑 想要了解Spring的事务嵌套&#xff0c;我们先了解一下Spring的七种事务传播属性各自表示的意思 propagation_requierd&#xff1a;如果当前没有事务&#xff0c;就新建一个事务&#xff0c…

简单的TCP网络程序·单进程(后端服务器)

目录 文件1&#xff1a;tcpServer.cc 文件2&#xff1a;tcpServer.hpp 1.提出日志概念 -- 在后续完善 日志格式 -- 暂定简单的打印功能 2.创建套接字 SOCK_STREAM -- socket参数 3.bind自己的套接字 4.设置socket 为监听状态 * 新接口1&#xff1a;listen 函数1&…

Spring Boot进阶(46):集成Jackson之快速入门 | 超级详细,建议收藏

1. 前言&#x1f525; 在上一期《SpringBoot之Jackson配置全局时间日期格式》文中提到Jackson&#xff0c;了解到有很多小伙伴对它很感兴趣&#xff1b;顾这一期&#xff0c;我就重点带着大家以最基础的教学方式领大家入门&#xff0c;废话不多说&#xff0c;咱们这就开始。 这…

(字符串) 925. 长按键入 ——【Leetcode每日一题】

❓925. 长按键入 难度&#xff1a;简单 你的朋友正在使用键盘输入他的名字 name。偶尔&#xff0c;在键入字符 c 时&#xff0c;按键可能会被长按&#xff0c;而字符可能被输入 1 次或多次。 你将会检查键盘输入的字符 typed。如果它对应的可能是你的朋友的名字&#xff08;…