elment ui drawer 页面抖动问题

最新推荐文章于 2025-12-28 13:38:54 发布
原创 最新推荐文章于 2025-12-28 13:38:54 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ui #服务器 #linux

博客指出drawer打开前页面会抖动且右边留白，原因是滚动条。解决办法是在属性里添加一行代码，即多加一个 :lockScroll=\false\ 。

drawer打开之前 页面会抖动一下 甚至右边会有留白 是因为滚动条所致 我们只需要添加一行代码即可

 <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      :size="size"
      :with-header="false"
      :lockScroll="false"
    >

如上所示 在属性里多加一个 :lockScroll="false"即可

李妮嘎_
关注
【区分vue2和vue3下的element UI Drawer 抽屉组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
07-18 1150
在 Vue 2 中，Element UI 提供了 Drawer 抽屉组件，而在 Vue 3 中，相应的库是 Element Plus，它也提供了类似的 Drawer 组件。虽然它们的功能相似，但在属性、事件和方法的命名上可能会有所不同，以符合 Vue 3 的新特性和改进。
vue中使用element ui的弹窗与echarts之间的问题详解
10-16
在Vue.js应用中，结合Element UI和ECharts进行开发时，可能会遇到一些特定的问题，尤其是在使用Element UI的弹窗组件（如`el-drawer`）内嵌ECharts图表时。本文将深入探讨这个问题，并提供解决方案。 首先，问题的...
【干货分享】解决element弹框组件导致页面抖动问题
希望看完文章的你能够带着答案离开。
07-26 4428
【干货分享】解决element弹框组件导致页面抖动问题
如何解决el-drawer抽屉组件打开时的抖动现象
XiongFine的博客
04-03 3963
el-drawer 打开时有抖动现象解决办法
VUE中碰到的一些问题
m0_67873602的博客
07-14 519
let { href} = this.$router.resolve({ name:'largeScreenMap', query:{ id:row.id } }) window.open(href,'_blank')使用v-if控制 首先，把关闭抽屉销毁元素打开： 然后，控制开关不能用父组件传过来的值，在created或者mounted中，使用$nextTick给data中的isshow赋值，页面就不会发生抖动了：
element-ui关于el-drawer抽屉的一点小bug总结
Ｓｈａｄｏｗ的专栏
10-10 2334
这可不行,页面抖动这不能交付啊.查找原因,搜遍了网络没找到一点点有用的东西,全是那几条原创来回被传.头疼. 后来忘了哪里得来的灵感,说是这个抽屉出来的时候改变了高度什么的,导致页面左移了一个滚动条的宽度,只需要将页面最大高度设置成。没什么结果,算了,自己找找原因吧. 上面提到完全引入和按需引入的情况,想着是不是样式出了问题,结果经过控制台查看vue的插件,发现了很多官方文档没有提及的属性.而且有很多是官方文档给出的,挨个试试,不了发现了惊喜!不行,这东西需要搞样式了.方式四:(方式三+方式四 =完美版)
vue使用elementui的drawer组件作为子组件，出现的闪现问题
Mr_2612757的博客
03-01 2352
在父组件中点击，打开子组件的drawer,使用v-if打开会出现闪现，子组件初始化时候打开drawer需要加上。$nextTick可以解决。
element Drawer抽屉在ie浏览器页面抖动
新生代农民工
12-14 1886
测试提了一个bug，项目在IE浏览器中点击饿了么的组件抽屉页面会抖动，现在还有人用IE吗？看到这种bug头就大，没办法只能看看是什么问题了，在谷歌浏览器，别的一些浏览器都是没有问题的，百度了下有很多人也遇到了这个问题，可能是样式问题，是element自带的样式问题。 找到问题就解决问题，最简单的办法就是把这个属性去掉或者替换掉。 .el-drawer__wrapper{ overflow: visible; } ...
解决element弹窗打开时页面往左抖动
tt1234561009的博客
05-23 1060
相信很多人在使用element的弹窗组件el-dialog时都遇到过窗口往左偏移的问题，出现这个问题可能是因为页面出现了滚动条，在窗口打开后body标签上增加了padding-right: 17px;所以，我们可以在代码中强制修改body的样式，如下。
精选资源
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
在这个特定的案例中，我们讨论的是如何在Element UI的基础上自定义Dialog（对话框）和Drawer（抽屉）组件，以实现无覆盖和可拖拽的功能。 Dialog组件通常用于显示临时的信息或者进行一些交互操作，而Drawer则常用于...
Element UI Drawer组件尺寸调整方法详解
Element Drawer组件是基于Vue.js的前端UI框架Element UI中的一个重要组成部分，主要用于实现从屏幕边缘滑出的抽屉式面板，常用于移动端或桌面端的侧边导航、表单填写、信息展示等交互场景。在实际开发过程中，开发者...
版本2.4 element-ui 离线中文文档api
01-05
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，用于构建美观、可自定义且响应式的用户界面。版本 2.4 是 Element UI 的一个重要里程碑，其中包含了大量的改进和优化。这个离线版的 ...
在IE浏览器下分辨率是1366*768时打开drawer时页面抖动
xwyjw的博客
09-09 320
解决在IE浏览器下分辨率是1366*768时打开drawer时页面抖动的问题 直接说原因： 通过排查在谷歌下没有问题 感觉可能是样式问题 于是一个一个排查 最后发现是element自带的样式问题 此样式在做怪 找到问题后就解决问题，最简单我们只需要把这个属相去掉或者替代 由于本人样式太菜 只好用了他的默认值 问题到这就解决了 如果有大佬发现更好的解决办法 望指出 ...
Vue | Element UI Plus 完美解决el-dialog双滚动条、页面抖动问题
m0_59074557的博客
03-12 3377
(添加 :lock-scroll="false" 属性)（无效的话把冒号去掉试试）解决双滚动条问题：（无效的话去掉deep）
vue中子组件加载完成闪烁问题
weixin_55666792的博客
05-06 915
vue子组件闪烁
el-drawer 被遮罩层覆盖 显示异常
carbonzhao的专栏
05-17 1279
这是由于元素的一些层级设置不同导致的，所以蒙层被放在了最顶端。
日常工作记录 el-drawer弹窗遮罩问题
caiweim的博客
11-03 2648
将modal置为false就行，这样其实也解决了，貌似没什么问题，就是少了遮罩层。然后我就发现了append-to-body这个属性，将自身插入body元素上，嵌套的必须为true，将append-to-body置为true，然后发现问题解决了。问题出现了，因为我引入的那个界面原本就有一层弹窗了，导致打开el-drawer弹窗的时候整个界面都被这层遮罩挡住了。在开发的时候有个需求，在一个地方增加一个页面的入口，这很简单，加个按钮，将页面引入，增加一个弹窗就行。东西很简单，日常记录一下。
el-drawer 不重复触发，el-drawer 只触发一次，el-drawer关闭后不能再次打开
killerdoubie的博客
03-17 2636
el-drawer 不重复触发，el-drawer 只触发一次，el-drawer关闭后不能再次打开
当AI遇见UI：A2UI协议在.NET Blazor中的完整实现与深度剖析
最新发布
许泽宇的技术分享
12-28 2286
本文深入探讨了A2UI协议在.NET9 Blazor中的实现，提出了一种让AI安全生成用户界面的创新方案。传统AI生成UI面临安全性、跨平台适配和体验一致性三大挑战，A2UI通过声明式UI协议完美解决：AI只需发送UI"意图"数据，由客户端原生组件渲染实现。文章详细解析了四层架构设计、核心协议实现和组件系统，展示了如何通过扁平化组件树、三种数据绑定模式和流式处理实现高效渲染。同时介绍了Fluent API、主题系统和实战应用场景，对比了与传统方案的差异，并提供了性能优化和安全实践建议。该
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值