elment ui drawer 页面抖动问题

最新推荐文章于 2026-01-05 11:27:28 发布

原创最新推荐文章于 2026-01-05 11:27:28 发布 · 1.2k 阅读

1 ·

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"即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

李妮嘎_

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【区分vue2和vue3下的element UI Drawer 抽屉组件，分别详细介绍属性，事件，方法如何使用，并举例】

xiejunlan的博客

07-18

1154

在 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图表时。本文将深入探讨这个问题，并提供解决方案。首先，问题的...

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

如何解决el-drawer抽屉组件打开时的抖动现象

XiongFine的博客

04-03

3970

el-drawer 打开时有抖动现象解决办法

【干货分享】解决element弹框组件导致页面抖动问题

希望看完文章的你能够带着答案离开。

07-26

4432

【干货分享】解决element弹框组件导致页面抖动问题

vue使用elementui的drawer组件作为子组件，出现的闪现问题

Mr_2612757的博客

03-01

2361

在父组件中点击，打开子组件的drawer,使用v-if打开会出现闪现，子组件初始化时候打开drawer需要加上。$nextTick可以解决。

element Drawer抽屉在ie浏览器页面抖动

新生代农民工

12-14

1887

测试提了一个bug，项目在IE浏览器中点击饿了么的组件抽屉页面会抖动，现在还有人用IE吗？看到这种bug头就大，没办法只能看看是什么问题了，在谷歌浏览器，别的一些浏览器都是没有问题的，百度了下有很多人也遇到了这个问题，可能是样式问题，是element自带的样式问题。找到问题就解决问题，最简单的办法就是把这个属性去掉或者替换掉。 .el-drawer__wrapper{ overflow: visible; } ...

解决element弹窗打开时页面往左抖动

tt1234561009的博客

05-23

1067

相信很多人在使用element的弹窗组件el-dialog时都遇到过窗口往左偏移的问题，出现这个问题可能是因为页面出现了滚动条，在窗口打开后body标签上增加了padding-right: 17px;所以，我们可以在代码中强制修改body的样式，如下。

在IE浏览器下分辨率是1366*768时打开drawer时页面抖动

xwyjw的博客

09-09

320

解决在IE浏览器下分辨率是1366*768时打开drawer时页面抖动的问题直接说原因：通过排查在谷歌下没有问题感觉可能是样式问题于是一个一个排查最后发现是element自带的样式问题此样式在做怪找到问题后就解决问题，最简单我们只需要把这个属相去掉或者替代由于本人样式太菜只好用了他的默认值问题到这就解决了如果有大佬发现更好的解决办法望指出 ...

Vue | Element UI Plus 完美解决el-dialog双滚动条、页面抖动问题

m0_59074557的博客

03-12

3380

(添加 :lock-scroll="false" 属性)（无效的话把冒号去掉试试）解决双滚动条问题：（无效的话去掉deep）

根据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 的一个重要里程碑，其中包含了大量的改进和优化。这个离线版的 ...

vue中子组件加载完成闪烁问题

weixin_55666792的博客

05-06

918

vue子组件闪烁

VUE中碰到的一些问题

m0_67873602的博客

07-14

520

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

2335

这可不行,页面抖动这不能交付啊.查找原因,搜遍了网络没找到一点点有用的东西,全是那几条原创来回被传.头疼. 后来忘了哪里得来的灵感,说是这个抽屉出来的时候改变了高度什么的,导致页面左移了一个滚动条的宽度,只需要将页面最大高度设置成。没什么结果,算了,自己找找原因吧. 上面提到完全引入和按需引入的情况,想着是不是样式出了问题,结果经过控制台查看vue的插件,发现了很多官方文档没有提及的属性.而且有很多是官方文档给出的,挨个试试,不了发现了惊喜!不行,这东西需要搞样式了.方式四:(方式三+方式四 =完美版)

el-drawer 被遮罩层覆盖显示异常

carbonzhao的专栏

05-17

1284

这是由于元素的一些层级设置不同导致的，所以蒙层被放在了最顶端。

vue中使用el-upload组件修改上传的图片时，每次都会自动闪过上一次的图片

爱学习的大雄的博客

02-16

3492

在解决问题后要及时记录，才能让自己在以后遇到同样问题的时候更快解决。

封装el-drawer时遇到的问题,及解决方案

weixin_49035434的博客

08-22

3637

方法1: 父组件 <template> <div id="app"> <el-button type="success" @click="success">成功按钮</el-button> <drawer :isDrawer.sync='isDrawer' /> </div> </template> isDrawer: false, success() { this..

Qt 控件使用铁律

最新发布

笔记本

01-05

796

✅ UI 设计师拖入Widget→ 提升为Event类 → Qt 自动生成，这是绑定到界面的有效对象绝对不要用 new 覆盖；✅ 该对象的已由setupUi初始化，可直接调用配置函数。

element ui 抽屉样式修改

05-22

### 如何自定义 Element UI 抽屉组件的样式 Element UI 的 `el-drawer` 组件提供了丰富的配置选项，允许开发者通过多种方式调整其外观和行为。以下是几种常见的方法来自定义抽屉组件的样式。 #### 方法一：使用 Scoped CSS 修改局部样式可以通过 Vue 单文件组件中的 `<style scoped>` 来限定样式的范围，仅影响当前组件内的抽屉组件。例如： ```html <template> <el-drawer :visible.sync="drawerVisible"> 我是一个抽屉内容 </el-drawer> </template> <style scoped> /* 自定义抽屉内部的内容样式 */ ::v-deep .el-drawer { background-color: #f0f0f0; } /* 调整抽屉标题区域的颜色 */ ::v-deep .el-drawer__header { color: blue; } </style> ``` 这种方法利用了 `::v-deep` 穿透作用域的选择器[^3]，可以覆盖默认的类名并应用新的样式。 --- #### 方法二：全局修改抽屉组件的样式如果希望在整个项目中统一修改抽屉组件的样式，则可以在项目的全局样式文件（如 `src/assets/styles/global.scss` 或 `App.vue` 中引入）中编写通用规则： ```css .el-drawer { /* 设置背景颜色 */ background-color: #ffffff; /* 隐藏滚动条 */ overflow-y: hidden; } /* 调整方向为右侧时的具体宽度 */ .el-drawer.rtl { width: 40%; /* 默认宽度为 30%，可以根据需求更改 */ } ``` 这种方式适用于需要一致性的场景，比如所有的抽屉都需要相同的宽度或背景色[^1]。 --- #### 方法三：动态绑定样式属性对于更灵活的需求，可以通过 JavaScript 动态设置抽屉的样式。例如，在父组件中传递参数到子组件，并根据这些参数计算具体的样式值： ```javascript <template> <el-drawer :title="title" :visible.sync="drawerVisible" :direction="direction" :size="customSize" >  </el-drawer> </template> <script> export default { data() { return { drawerVisible: false, title: '自定义标题', direction: 'rtl', // 右侧显示 customSize: '50%' // 动态尺寸 }; } }; </script> ``` 此方法特别适合于需要根据不同条件调整抽屉大小或其他特性的场合[^2]。 --- #### 方法四：增加交互逻辑优化用户体验除了静态样式外，还可以结合事件监听进一步提升体验。例如，禁用页面滚动条以防止干扰用户的视觉焦点： ```javascript methods: { openDrawer() { document.body.style.overflow = 'hidden'; // 打开抽屉时隐藏滚动条 }, closeDrawer() { document.body.style.overflow = ''; // 关闭抽屉时恢复滚动条 } }, watch: { drawerVisible(newVal) { if (newVal) { this.openDrawer(); } else { this.closeDrawer(); } } } ``` 这种技术能够有效解决因抽屉动画引起的布局抖动问题。 --- #### 方法五：扩展功能支持拖拽调整宽度为了增强灵活性，可通过第三方库（如 ResizeObserver API 或 vue-resizable 插件）实现抽屉宽度的手动调节。下面是一段简单的示例代码片段： ```html <template> <el-drawer ref="drawerRef" v-bind="$attrs" @open="onOpen" @close="onClose"> <resizable-area /> </el-drawer> </template> <script> import ResizableArea from './ResizableArea'; export default { components: { ResizableArea }, methods: { onOpen() { console.log('抽屉已打开'); }, onClose() { console.log('抽屉已关闭'); } } }; </script> ``` 更多细节参见相关文档说明[^4]。 --- ### 总结以上介绍了五种不同的方案用于定制化 Element UI 抽屉组件的表现形式，具体采用哪种取决于实际业务需求以及团队的技术栈偏好。