element-ui里message抖动问题

由于element默认屏蔽滚动条,导致取消时弹message时 侧边滚动栏突然回来后引起抖动问题

24621

是由于打开弹窗时出现遮罩层dialog对话框 时引起了元素内容超出自身尺寸 对应的overflow样式内容为hidden,且新建了一个class类内容为增加17 内右边距,当弹框取消时 这些属性消失,所有产生抖动行为 ,如下图

2462111

什么时候会溢出? 内容太长或是其他情况(没遇到过其他情况)

overflow可选值

  1. visible(默认值): 溢出部分将会显示在元素框之外。
  2. hidden: 溢出部分将被切掉,不显示滚动条。
  3. scroll: 溢出部分将被切掉,但会显示滚动条,用户可以滚动查看。
  4. auto: 如果内容太多而无法在元素框内完全显示,则显示滚动条;否则不显示滚动条。

综上,我们只需要在App.vue入口文件里加入如下样式即可

body {
  overflow: hidden !important;
  padding-right: 0 !important;
}

至此完美解决上述问题

222

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

QML 实现上浮后消失的提示框

基本效果:上浮逐渐显示,短暂停留后上浮逐渐消失 为了能同时显示多个提示框,一是需要动态创建每个弹框 Item,二是弹出位置问题,如果是底部为基准位置就把已经弹出的往上移动。 效果展示: 主要实现代码&…

区块链中nonce是什么,什么作用

目录 区块链中nonce是什么,什么作用 区块链中nonce是什么,什么作用 Nonce在以太坊中是一个用于确保交易顺序性和唯一性的重要参数。以下是对Nonce的详细解释: 定义 Nonce是一个scalar值,它等于从该地址发送的交易数量,或在具有关联代码的账户的情况下,由该账户创建的合…

掌握Three.js:学习路线,成为3D可视化开发的高手!

学习Three.js可以按照以下路线进行: 基础知识: 首先要了解基本的Web开发知识,包括HTML、CSS和JavaScript。如果对这些知识已经比较熟悉,可以直接进入下一步。 Three.js文档: 阅读Three.js官方文档是学习的第一步。官…

192.回溯算法:电话号码的字母组合(力扣)

代码解决 class Solution { public:// 定义每个数字对应的字母映射const string letterMap[10] {"", // 0"", // 1"abc", // 2"def", // 3"ghi", // 4"jkl", // 5"mno", // 6"pqrs&…

软件测试----用例篇(设计测试用例保姆级教程✅)

文章目录 前言一、测试用例概念 二、如何设计测试用例三、设计测试用例的方法3.1基于需求的设计方法3.2具体的设计方法等价类边界值正交法判定表法场景法错误猜测法 前言 在软件开发过程中,测试用例是至关重要的一环。它们帮助软件开发人员和测试人员确定软件是否按…

FlinkSQL开发经验分享

最近做了几个实时数据开发需求,也不可避免地在使用Flink的过程中遇到了一些问题,比如数据倾斜导致的反压、interval join、开窗导致的水位线失效等问题,通过思考并解决这些问题,加深了我对Flink原理与机制的理解,因此将…

嵌入式开发板屏幕显示汉字

一、实验目的 1.编写能够在嵌入式开发板LCD上显示汉字的程序; 2.在Ubuntu系统中编译上述程序生成可执行文件; 3.到开发板中验证。 二、实验步骤 1. Ubuntu系统上编写验证程序 Ubuntu系统上编写的验证程序如下&…

【开发12年码农教你】Android端简单易用的SPI框架-——-SPA

Service(priority 1) public class APrinterService implements IPrinterService { Override public void print() { System.out.println(“this is a printer service.”); } } 复制代码 B模块 —— BPrinterService Service(path“b_printer”, priority 2) public class…

监控 Promethus的监控告警Alertmanager、Grafana

Promethus的监控告警Alertmanager Alertmanager 介绍 Prometheus的一个组件,用于定义和发送告警通知,内置多种第三方告警通知方式,同时还提供了对Webhook通知的支持基于警报规则对规则产生的警报进行分组、抑制和路由,并把告警发…

华硕笔记本重装系统详细操作,图文教程体验Win11如何重装系统

随着科技的不断发展,电脑操作系统的步骤也在不断更新迭代。对于华硕笔记本用户来说,升级到Windows 11操作系统可以带来更好的使用体验。本文将通过图文教程的形式,详细介绍华硕笔记本重装Windows 11系统的操作步骤,帮助用户顺利完…

用AI打败AI,利用ai指令对头条文章进行查重测试,结果出乎意料

前言:现在的ai真的太火爆了,让人不得不感叹ai的神奇之处,让我们一起来探讨下ai的强大之处吧!本文仅限学习研究。 背景:最近看到很多人用ai写文章,然后被头条判定为疑似ai生成,所以想研究学习下…

ES6 解构赋值详解

ES6是JavaScript语言的一次重大更新,引入了许多新特性和语法改进,其中解构赋值是一个非常实用和灵活的语法特性。它可以让我们从数组或对象中提取值,并赋给对应的变量,让代码变得更加简洁和易读。本文将深入探讨ES6解构赋值的语法…

ROS | 常见故障排查

1.开启后发出一个WIFI WIFI名字:WHEELTEC接数字 安全密钥:dongguan 2.显示屏接口 USB接口接键鼠 3.远程登录命令 ssh -Y wheeltec192.168.0.100 是小车发出的WIFI的一个IP地址 4. 登录后确保IP地址 ip a 看一下 当前ip地址 倒数第四行-当前ip地址 1…

简易部署的设备日志采集工具

永久免费: Gitee下载 最新版本 使用说明: Moretl 企业级采集文件工具 优势: A. 开箱即用. 解压直接运行.不需额外安装. B. 批管理设备. 设备配置均在后台管理. C. 无人值守 客户端自启动,自更新. D. 稳定安全. 架构简单,内存占用小,通过授权访问.

数据结构---二叉树前中后序遍历

1. 某完全二叉树按层次输出(同一层从左到右)的序列为 ABCDEFGH 。该完全二叉树的前序序列为() A: ABDHECFG B: ABCDEFGH C: HDBEAFCG D: HDEBFGCA 2. 二叉树的先序遍历和中序遍历如下:先序遍历: EFHIGJK; 中序遍历: HFIEJKG. 则二叉…

[数据集][目标检测]药片药丸检测数据集VOC+YOLO格式152张1类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):152 标注数量(xml文件个数):152 标注数量(txt文件个数):152 标注类别…

企业级Web项目中应该如何做单元测试、集成测试和功能测试?

先自我介绍下: 本人有过10年测试经验,也参与过公安部网络安全产品测试交付、华为4G 网络设备测试交付、腾讯QQ空间APP产品测试交付。 关于“企业级Web项目中应该如何做单元测试、集成测试和功能测试”这个问题,我想给大家唠唠,我…

Django数据驾驶舱

Django数据驾驶舱 1.项目介绍2.项目结构3.库表结构3.1 appcsdn的models3.2 appssq的models3.3 appweather的models3.4 appweibo的models 4.功能展示5.解决问题5.1 路由配置5.2 后端数据与前端echarts展示5.3 长图表丝滑滚动条 6.遗留问题7.资源分享 1.项目介绍 这里介绍本人最…

excel数据透视

Excel中,数据透视图(PivotChart)和数据透视表(PivotTable)是两个紧密相关的工具,用于分析数据。数据透视表是数据透视图的数据源,也就是说,数据透视图是基于数据透视表中的数据创建的…