解决element-plus的el-dialog弹出框的时候会多出width:calc(100% - 8px)问题

码农的救赎

于 2024-05-23 15:20:32 发布

阅读量511

点赞数 13

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_74545388/article/details/139148794

版权

打开会莫名其妙的el-dinalog出现位移，并且body上出现 style="width:calc(100% - 8px)"

<el-dialog :lock-scroll="false" v-model="dialogFormVisible" width="500"></el-dialog>

只要加上:lock-scroll="false"即可,在官网上是这样写的

lock-scroll 是否在 Dialog 出现时将 body 滚动锁定 boolean true

只要设置为false即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

码农的救赎

关注关注

13
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue - ElementUI 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）

王佳斌

03-20

2963

vue2，element-ui，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，在element ui组件库中，使用el-drawer抽屉弹框组件，当设置append-to-body属性后，无法使用deep进行样式覆盖怎么办，关于vue+element中el-dialog设置append-to-body样式不生效问题，vue2 elementUI el-dialog修改了body样式不生效问题解决方案，element组件

基于element-ui对话框el-dialog初始化的校验问题解决

10-14

在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...

1 条评论您还未登录，请先登录后发表或查看评论

解决使用el-dialog之后底层的布局会被向左挤压

qq_52214334的博客

01-03

658

在做vue3+element-plus的时候，很多地方用到了弹窗，但是每次使用弹窗的时候都会发现一个问题，弹窗下面的布局会因为弹窗的出现而被挤压。解决方案，在css初始化的样式中将body的宽度定好，问题解决。仔细观察了一下组件本身的样式，没发现问题。最后将注意点放在了body上面，==

优化element ui中的弹框样式

hjhfreshman的博客

05-27

6262

element ui 虽然提高了开发效率，但是坑也不少，比如弹框的体验就不佳：弹框体验不佳自带的弹框样式有很多缺点，比如不居中，大小会超出屏幕然后在最右侧出现滚动条，看不到footer里的按钮等。这个时候就需要自己写样式覆盖默认样式来优化了。让我们一个一个来解决1. 居中弹框.el-dialog position absolute to...

element的级联选择器Cascader超出屏幕现象

m0_47802926的博客

03-27

1142

element的级联选择器Cascader超出屏幕现象原因：版本不一致造成的。解决办法： // 在全局的global.css样式中给el-cascader-panel添加高度 .el-cascader-panel{ height: 200px; }

element el-dialog 引发的问题

CodeBoyDong的博客

03-29

2646

elementUI在打开dialog的时，页面右侧会出现滚动条，或是页面宽度会缩小，当关闭dialog后又恢复原样，控制台检查后发现当打开dialog时，body元素会有class=el-popup-parent--hidden的类名，关闭dialog后el-popup-parent--hidden类名消失，这应该就是造成页面出现滚动条或是宽度缩小的原因，查了一下资料发现有两种解决办法，我用的是第二种方法。1. 重写el-popup-parent--hidden的样式。

element ui 的dialog关闭页面收缩了一下

weixin_53663576的博客

03-16

468

当关闭element ui的弹出框时，页面进行了收缩，网上搜了一下原因，说是：当dialog出现时, 页面右边缩小了5px, 看起来像是抖动了一下.然后我看了一下页面的样式,发现body多了样式样式,padding-right:5px 和 overflow: hidden.然后我就在全局设置body的padding-right:0 !important 就好了! 以上是网上收到的答案，我试了一下，发现没有效果，然后看了代码跟element的官方文档，发现是我的append-to-body没有进行添加，以下是

el-dialog宽度自适应

最新发布

STATICHIT静砸的博客

03-28

1912

其中有一个是，在使用element-plus的el-dialog时，在pc端和在手机端打开，由于屏幕宽度的不同，我希望el-dialog的宽度是不一样的。当我在pc端用浏览器打开页面，并缩小窗口时，并不会触发宽度的变化。1️⃣首先，直接给el-dialog设置自定义class结合媒体查询是无效的，直接设置el-dialog的样式属性无效。但每次窗口修改时我需要刷新才会重新触发修改width的操作，所以这里我再加了个监听视口变化的操作。这只是获取你操作屏幕的宽度，并不是你窗口的宽度。

elementUI vue this.$confirm 和el-dialog 弹出框移动示例demo

10-16

### el-dialog 弹出框组件 `<el-dialog>`是Element UI提供的一个模态框组件，可以用来创建对话框框体。在文件示例中，我们可以看到如何使用`<el-dialog>`来创建一个包含确认/取消功能的提示弹窗。`<el-dialog>`提供...

android-dialog弹出框，弹出gridview条目选中.rar

01-17

本示例“android-dialog弹出框，弹出gridview条目选中”是一个实现自定义Dialog并集成GridView来展示可选条目的实践案例。下面我们将深入探讨这一主题。首先，`Dialog`是Android提供的一个类，用于显示一个浮动...

element-ui中dialog弹窗关闭按钮失效的解决

10-14

在使用element-ui的el-dialog组件时，有时可能会遇到关闭按钮失效的问题。这个问题可能是由于多种原因导致的，比如数据绑定或者事件监听设置不当等。在element-ui中，Dialog组件的使用是相对直观的，但有时在复杂的...

Element ui Dialog弹出框宽度固定不变

PaPablame的博客

11-03

2509

一般我们引用Dialog弹出框时，弹出框的大小都是用width="30%"这样来设置，这样的话我们在缩小屏幕的时候弹出框就会根据你缩小屏幕的宽度的百分比来设置，这样你弹出框里面的东西就会溢出，如果你不想溢出就把宽度写成width="500px"，这样就可以了！注意px后面没有分号！！ ...

element-plus：Dialog 对话框在有滚动条的页面会抖动

彭世瑜的博客

10-09

1568

查看元素发现，动态增加了一个style标签

两种方法解决elementui的el-dialog 移动端中使用百分比显示问题，自适应（响应式）

Codernmx

06-22

3731

一、几行css就搞定，不需要去动态的监听获取屏幕宽度啥的，来更改width，这里的意思就是当屏幕宽度小于600px并且大于220px的时候设置为90%显示，如果仅仅需要小于某一个值的话用一个and就行，大于某一个值也是一样。二、根据document.body.clientWidth设置width 在mounted中或者created中获取一下宽度给dialog赋值一下就行。个人感觉还是css3的media方便一点，方法很多，看自己咋个用吧...

elementui-plus el-dialog弹出时body有滚动条，修改了body样式

u014220146的博客

08-30

3552

使用组件el-dialog弹窗，写在二级组件中。

前端-关于分辨率和屏幕大小关系的浅谈

H_shaohui的博客

10-31

2860

最近在工作中，总有些非前端小伙伴在问分辨率和屏幕的大小关系问题，故在此记录一下，方便不清楚的小伙伴订阅观看。

elementUI的弹框el-dialog优化高度为视口高度

qq_44552416的博客

05-31

8874

问题： elementUI的弹框el-dialog高度虽然是根据内容自动撑开，但是当内容很多的时候，往往下面的操作按钮会被遮挡，需要滚动条才能保存，用户体验极差。现在对弹框进行优化 1、当内容不多的时候，弹框自动撑开高度就可以。 2、内容很多的时候，弹框高度为视口高度的90%（90vh），中间内容区出现滚动条。 // el-dialog高度自适应，内容超出时中间出现滚动条 .common-dialog { display: flex; justify-content: center

解决el-dialog弹框出现页面抖动问题

leng0920的博客

06-04

3022

main.js import ElementUI from 'element-ui'; // 防止dialog导致页面滚动条消失抖动 ElementUI.Dialog.props.lockScroll.default = false; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);

[IE兼容]element 组件 el-dialog在低分辨率下出现半透明bug

weixin_45776447的博客

05-13

1087

这里写自定义目录标题[IE兼容]element 组件 el-dialog在低分辨率下出现半透明bug解决方法 [IE兼容]element 组件 el-dialog在低分辨率下出现半透明bug IE环境下，当页面内容元素众多时，可能触发dialog组件弹出框的动画卡顿，导致半透明。解决方法 <el-dialog :visible.sync="isShowNew" ></el-dialog> 监听触发visible变化的传入值，一段延迟之后再为visible 赋值 wat

element-plus中el-dialog关闭后弹出

04-24

的confirm提示框中如何防止重复点击确认按钮？您好，针对您的问题，可以在关闭 el-dialog 的时候，将 confirm 的 visible 属性设置为 true，同时禁用确认按钮，等待一定时间后再将 visible 设置为 false，同时启用确认按钮。这样可以防止用户重复点击确认按钮。具体实现可以参考以下代码： ``` <template> <div> <el-dialog :visible.sync="dialogVisible" @close="handleClose"> Dialog Content </el-dialog> <el-dialog :visible.sync="confirmVisible"> <span>{{ confirmMessage }}</span> <div slot="footer"> <el-button :disabled="isConfirmDisabled" @click="handleConfirm">确认</el-button> </div> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, confirmVisible: false, confirmMessage: '确认关闭？', isConfirmDisabled: false, }; }, methods: { handleClose() { this.confirmVisible = true; this.isConfirmDisabled = true; setTimeout(() => { this.confirmVisible = false; this.isConfirmDisabled = false; }, 3000); }, handleConfirm() { // 确认关闭操作 }, }, }; </script> ``` 当弹出确认框时，确认按钮会被禁用，防止重复点击。3 秒后，确认框会自动隐藏，同时确认按钮会被启用。当用户点击确认按钮时，可以在 handleConfirm 方法中实现关闭 el-dialog 的操作。希望对您有所帮助，如有疑问，欢迎继续提问！