element-ui里message抖动问题

news2024/11/26 8:40:20

由于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.coloradmin.cn/o/1852268.html

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

相关文章

一文详解分布式 ID

分布式系统中,我们经常需要对数据、消息等进行唯一标识,这个唯一标识就是分布式 ID,那么我们如何设计它呢?本文将详细讲述分布式 ID 及其生成方案。 一、为什么需要分布式 ID 目前大部分的系统都已是分布式系统,所以在…

python实训day2

1、 from ming import * # 有点像C语言中的头文件 """在Python开发环境中,封装一个函数,功能目标为:通过两个整数参数一次性获取和、差、积、商四个值 """ def calc(a, b):return a b, a - b, a * b, a / b…

使用SPI驱动数码管

代码&#xff1a; 7-seg.c /*《AVR专题精选》随书例程3.通信接口使用技巧项目&#xff1a;改进的延时法实现半双工软件串口文件&#xff1a;7seg.c说明&#xff1a;SPI控制数码管驱动文件作者&#xff1a;邵子扬时间&#xff1a;2012年12月15日*/#include <avr/io.h>ex…

AIGC时代的英语教育:人工智能会取代英语老师吗?

在当前AIGC&#xff08;Artificial Intelligence Generated Content&#xff09;时代&#xff0c;人工智能技术正在迅速发展并渗透到各个领域&#xff0c;其中包括英语教育。面对这一趋势&#xff0c;许多人担心人工智能会取代传统的英语教师。然而&#xff0c;本文将探讨人工智…

Android 天气APP(八)城市切换 之 自定义弹窗与使用

然后在模块的utils包中新建一个LiWindow类 代码如下&#xff1a; package com.llw.mvplibrary.utils; import android.app.Activity; import android.content.Context; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; im…

GitHub 标星 6

美国网友对这个大全给予了很高的评价&#xff1a;这份清单中列出的开源软件&#xff0c;不仅解决了硅谷大厂前员工的难处&#xff0c;也能为其他所有码农解除困惑。 在这套大全的指导下&#xff0c;任何一个工程师&#xff0c;都能获得类似在谷歌内部写代码的体验。xg2xg 上线…

【Flutter 专题】120 Flutter 腾讯移动通讯 TPNS~

1.2 方法使用 小菜按照官网的介绍尝试了一些常用的 API 方式&#xff0c;主要分为应用类&#xff0c;账号类和标签类三种 API&#xff0c;小菜业务中没有应用账号和标签模块&#xff0c;暂未深入研究&#xff1b; 应用接口 API a. 注册推送服务 对于服务的注册初始化&#x…

软件串口接收子程序

代码; stduart.c /*《AVR专题精选》随书例程3.通信接口使用技巧项目&#xff1a;使用延时法实现半双工软件串口文件&#xff1a;sfuart.c说明&#xff1a;软件串口驱动文件作者&#xff1a;邵子扬时间&#xff1a;2012年12月13日*/ #include "sfduart.h"// 循环中延…

数据结构历年考研真题对应知识点(栈)

目录 3.1栈 3.1.1栈的基本概念 【栈的特点&#xff08;2017&#xff09;】 【入栈序列和出栈序列之间的关系(2022)】 【特定条件下的出栈序列分析(2010、2011、2013、2018、2020)】 3.1.2栈的顺序存储结构 【出/入栈操作的模拟(2009)】 3.1栈 3.1.1栈的基本概念 【栈…

嵌入式linux系统中LCD屏驱动实现思路分析

在 Linux 下 LCD 的使用更加广泛,在搭配 QT 这样的 GUI 库下可以制作出非常精美的 UI 界面。接下来就来学习一下如何在 Linux 下驱动 LCD 屏幕。 第一:Framebuffer设备简介 先来回顾一下裸机的时候 LCD 驱动是怎么编写的,裸机 LCD 驱动编写流程如下: ①、初始化 I.MX6U 的…

NeRF从入门到放弃4: NeuRAD-针对自动驾驶场景的优化

NeuRAD: Neural Rendering for Autonomous Driving 非常值得学习的一篇文章&#xff0c;几乎把自动驾驶场景下所有的优化都加上了&#xff0c;并且也开源了。 和Unisim做了对比&#xff0c;指出Unisim使用lidar指导采样的问题是lidar的垂直FOV有限&#xff0c;高处的东西打不…

一年前 LLM AGI 碎片化思考与回顾系列⑦ · 在SystemⅡ未知之境之中徘徊

阅读提示&#xff1a; 本篇系列内容的是建立于自己过去一年在以LLM为代表的AIGC快速发展浪潮中结合学术界与产业界创新与进展的一些碎片化思考并记录最终沉淀完成&#xff0c;在内容上&#xff0c;与不久前刚刚完稿的那篇10万字文章「融合RL与LLM思想&#xff0c;探寻世界模型以…

02--MySQL数据库概述

目录 第10章 子查询 10.1 SELECT的SELECT中嵌套子查询 10.2 SELECT的WHERE或HAVING中嵌套子查询 10.3 SELECT中的EXISTS型子查询 10.4 SELECT的FROM中嵌套子查询 第11章 MySQL支持的数据类型 11.1 数值类型:包括整数和小数 1、整数类型 2、bit类型 3、小数类型 11.2…

1996年-2023年 全国298个地级市-外商直接投资FDI(数据收集)

外商直接投资&#xff08;FDI&#xff09;是一种跨国界的经济活动&#xff0c;它涉及外国投资者在中国境内进行的直接投资行为。这种投资行为不仅包括以货币、实物、技术等形式的资本投入&#xff0c;还可能包括开办独资企业、合资企业、合作企业&#xff0c;以及参与资源开发等…

FreeCAD中智能指针分析

实现原理 FreeCAD中有两套智能指针&#xff0c;一个是OCC的智能指针handle&#xff0c;另一个是自己定义的智能指针Reference&#xff0c;两种智能指针都是通过引用计数方式管理指针。 1.1 OCC智能指针handle OCC在基础类包中定义了一个模板类handle&#xff0c;该类包含一个私…

Github 2024-06-23开源项目日报 Top10

根据Github Trendings的统计,今日(2024-06-23统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量TypeScript项目3C++项目2JavaScript项目2非开发语言项目2Jupyter Notebook项目1Python项目1Vue项目1Java项目1HTML项目1从零开始构建你喜爱的技…

直流电机三级串电阻启动

直流电动机在工农业生产中拥有广泛的应用&#xff0c;这主要得益于其调速范围广、调速平稳、过载能力强以及启动和制动转矩大的优点。为了降低起动电流和起动转矩&#xff0c;研究者们探索了直流电动机串电阻起动方法。这种方法通过在直流电动机电枢绕组中串入电阻&#xff0c;…

【学习笔记】CSS

CSS 1、 基础篇 1.1、选择器 1.2、长度单位 1.3、CSS2 常用属性 1.4、盒模型 1.5、浮动 1.6、定位 position2、 CSS3 2.1、新增长度单位 2.2、新增颜色表示 2.3、新增选择器 2.4、新增盒子属性 2.5、新增背景属性 …

电子SOP实施(MQTT协议)

架构图 服务与程序 用docker启动mqtt broker(服务器) 访问&#xff1a;http://192.168.88.173:18083/#/dashboard/overview 用户名&#xff1a;admin 密码&#xff1a;*** 消息发布者(查找sop的url地址&#xff0c;发布出去) 修改url&#xff0c;重新发布消息 import ran…

5.XSS-反射型(post)利用:获取cookie

原理&#xff1a; 文件路径&#xff1a;\pikachu\pkxss\xcookie\post.html 将post.html文件&#xff0c;复制到皮卡丘的根路径下或者根下随意路径即可&#xff0c;并编辑文件 需要修改以下两个地址&#xff0c;第一个地址是将原界面的样子链接过来&#xff0c;让用户认为是原…