解决element-ui中MessageBox 弹框时滚动条导致布局抖动

最新推荐文章于 2024-08-15 09:43:14 发布
最新推荐文章于 2024-08-15 09:43:14 发布
阅读量1.8k 收藏 4
点赞数 8
分类专栏： 日常Bug解决 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51081319/article/details/120925791
版权 
html {
    width:100vw;
    overflow-x:hidden;
}
body{
  padding-right: 0px !important;
}
JokerLuffe
关注
专栏目录
Element-Ui中MessageBox弹框提交内容与确认消息的使用方法
小柠檬爱编程
12-16 7585
js: mod(row) { this.$prompt("请输入公司名称", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", inputValue: row.company_name, inputPattern: /\S/, inputErrorMessage: "公司名称不能为空" }) .then(({ value..
element-ui组件MessageBox 弹框确认消息报Uncaught (in promise) error
Joker的博客
06-27 1421
问题场景：前端使用vue-admin-teamplate-master搭建，写了删除一行数据的功能，在按钮点击删除后提示删除成功，但是随后先报了绿框提示删除成功，随后弹出红框但是没有提示信息，浏览器F12显示Uncaught (in promise) error。 组件地址：element-ui组件地址 源码： 首先是index.vue页面部分点击事件绑定 //删除的方法 removeDataById(id) { // console.log(id) //调用方法根据id删
element-plus解决dialog和messagebox标签页面抖动问题
qq_51913289的博客
02-20 1700
解决element plus中对话框和消息框造成页面抖动问题
Element组件dialog关闭时Message消息提示抖动问题
L的博客
10-12 514
Element组件dialog关闭时Message消息提示抖动问题
Element UI【详解】el-scrollbar 滚动条组件
最新发布
yang295242361的博客
08-15 6170
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动，跟随页面一起滚动，获取滚动距离，隐藏水平滚动条等
element ui el-dialog 居中，并且内容多的时候内部可以滚动
一方湖泊
01-19 1078
<el-dialog title="图标设置" :visible.sync="iconModal" custom-class="pub_dialog"> </el-dialog> css 放到公共css文件里（放到App.vue的css中），不能放到页面的style里 // dialog自定义 .pub_dialog { position: absolute; top: 50%; left: 50%; margin: 0 !important;
使用element-ui的弹出窗口时，由于滚动条造成的页面闪动问题
riluokk的博客
05-25 5539
问题： 在使用element-ui的el-dialog时，由于遮罩层的出现，导致页面的滚动条隐藏，从而使页面出现闪动的效果。 解决过程 当遇到这个问题时，我想能不能是滚动条悬浮于页面上，及脱离文本流，从而不影响页面的宽度，于是我百度时发现了这个css属性，及在body或者盒子上添加 body:{ overflow:overlay } 这个可以使页面滚动条的隐藏和显示影响页面的宽度，但是这个问题存在兼容性问题，且是一个被‘废弃’的属性，于是我就放弃了这个想法。 于是我继续翻看element-ui的文档，发
使用Vue+elementUI开发前端页面，打开对话框时页面出现抖动的问题
weixin_42965737的博客
10-27 3558
** 打开对话框时页面出现抖动是因为页面的右侧出现滑块,打开对话框的时候滑块消失造成抖动。 ** <style scope> /* 防止打开对话框时页面的抖动 */ body{ padding-right: 0px !important; overflow: hidden; } </style> 如果按照上述的设置不会起到作用，因为"<style scope>"中将css样式设定为局部的。所以需要将"scope"去掉。 ...
element-plus打开Dialog、图片预览导致页面抖动
JamesCurtis的博客
07-20 1480
element-plus或element-ui打开Dialog、图片预览等有遮罩层的组件导致页面抖动。经过一番排查，这里还需要设置一下高度，要让外层的元素固定高度为整个页面的高度100vh，内层元素的高度就随便了。只要外层高度固定，不超过一屏那么就不会显示浏览器的滚动条。但是发现element-plus官方文档里面的预览并没有抖动，于是就f12看了下他们是咋实现的。属性会集成父级高度，所以效果和上面一样的。可.........
element-ui中messageBox的使用
seimeii的博客
12-23 1714
1、第一步 引入 import { MessageBox } from 'element-ui'; 2、第二步 使用 function confirm(options = {}) { let { title, message, ...ops } = options; return MessageBox.confirm(message, title, { closeOnClickModal: false, closeOnPressEscape: false,
Element MessageBox弹框的具体使用
10-15
Element MessageBox是Element UI中的一个弹框组件，用于展示重要信息、询问用户或者接收用户输入等。 在标题“Element MessageBox弹框的具体使用”中，主要的知识点包括了Element MessageBox的多种使用场景和对应的...
Element UI三十五MessageBox弹框
海恩的博客
11-28 5759
简介 MessageBox实际是一套对话框组件的概称，包括alert,alert,alert,confirm,prompt以及最基础的prompt以及最基础的prompt以及最基础的msgbox四种方法，适合展示较为简单的内容。 消息提示 通过$alert方法在用户要进行某个操作时弹出对话框中断该操作，直到用户确认知晓后才可真正执行。它接收两个参数message和title，表示弹框内容和标题。注意，当窗口被关闭后，该方法默认返回一个Promise对象用于进行后续操作的处理，如不确定浏览器是否支持Pr
vue confirm添加滚动条
weixin_45410246的博客
07-20 1210
代码】vueconfirm添加滚动条。
vue实现消息滚动
HouMengFei_的博客
06-28 2371
vue实现消息滚动 1.效果就是这样，下面的消息会进行滚动，大家可以把代码放到页面实时看下效果。 <ul id="con1" ref="con1" :class="{anim:animate==true}" style="margin:0"> <li v-for='(item,index) in items' :key="index">{{item.name}}</li> </ul> <script> export default {
对话框自带滚动条的使用
dingxz105090的专栏
09-30 3946
.h: CButton* m_pBtns; afx_msg void OnVScroll(UINT nSBCode, UINT nPos, CScrollBar* pScrollBar); afx_msg BOOL OnMouseWheel(UINT nFlags, short zDelta, CPoint pt); .cpp: #define SCROLLBAR_JUM
element UI 设置滚动条颜色
m0_56274171的博客
11-25 942
/*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { background: rgba(3, 52, 100, 0.6); } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { background: rgba(3, 52, 100, .8); } ::-webkit-scrollbar-thumb:hover { background: rgba(3, 52, 100, .9).
带货直播源码，使用elementui弹出框会隐藏滚动条
云豹网络科技
05-13 380
带货直播源码，使用elementui弹出框会隐藏滚动条 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', lockScroll: false //让滚动条没有变化 }).then(() => { elementui自带的配置lockScroll设置滚动条
element-ui 添加滚动条
热门推荐
伍六七
07-24 3万+
例如 在一个弹出框的表格添加滚动条 <!-- 弹出框 --> <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" center :close-on-click-modal=false> <div style="height:500px;" class="scr...
vue-element-admin框架 通用弹窗封装、信息确认框封装、滚动条优化（三）
qq_32812063的博客
06-23 1590
封装
vue 3.2 打开 element-plus messagebox 消息弹框设置只弹出一次
09-06
在Vue 3.2中，要设置element-plus messagebox消息弹框只弹出一次，可以通过以下步骤完成： 1. 首先，需要在Vue组件中引入element-plus的messagebox组件。 ```javascript import { ElMessageBox } from 'element-plus'; ``` 2. 在需要显示弹框的地方，调用ElMessageBox的函数方法，并将其返回值保存在变量（例如messageBoxInstance）中。 ```javascript const messageBoxInstance = ElMessageBox.confirm('这是一条消息', '标题', { showCancelButton: true, center: true }); ``` 3. 接下来，可以通过调用messageBoxInstance的close方法来关闭消息弹框。 ```javascript messageBoxInstance.close(); ``` 4. 为了实现只弹出一次的效果，需要在Vue组件中通过data选项定义一个变量（例如isMessageBoxShown）来标记消息弹框是否已经弹出。 ```javascript data() { return { isMessageBoxShown: false }; } ``` 5. 在需要显示消息弹框的地方，先判断isMessageBoxShown是否为false，如果是，则执行第2步中的代码，并将isMessageBoxShown设置为true。 ```javascript if (!this.isMessageBoxShown) { const messageBoxInstance = ElMessageBox.confirm('这是一条消息', '标题', { showCancelButton: true, center: true }); messageBoxInstance.close(); this.isMessageBoxShown = true; } ``` 通过以上步骤，即可在Vue 3.2中实现只弹出一次的element-plus messagebox消息弹框设置。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值