element plus Drawer 抽屉隐藏Bug，避坑！！！

已于 2023-06-10 15:11:44 修改
阅读量953 收藏 1
点赞数 1
分类专栏： Vue快速CRUD # element 日常demo，功能组件 文章标签： 前端框架 elementui html5 vue.js
于 2023-06-09 19:34:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ZW005499/article/details/131133688
版权
在Vue3中，由于组件不再需要唯一根节点，作者封装了一个基于Drawer的组件。然而，这引发了一个问题：在使用该组件后，页面跳转时不发送网络请求，导致页面显示为空白。解决方案是在组件外添加一个div作为根组件。目前尚不清楚具体原因。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

         在使用vue3配合element plus 开发中遇到一个暗坑。

当前路由页面使用Drawer 抽屉后，跳转其他页面不发送网路请求，页面空白。        

首先因为vue3组件不在需要唯一的根节点，封装了一个根节点是Drawer 抽屉的组件用来复用。

结果跳转页面后，页面空白，也不发网络请求！！！

解决办法：加一个div等标签作为根组件！！！

具体为什么会有这个问题，目前还不太了解。

希望有大佬帮们解答

Vue3 - Element Plus 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
王二红
03-20 4030
vue3，element-plus，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，deep失效了怎么办，当设置append-to-body=true时如何覆盖组件样式，改不了弹框样式，elementPlus弹窗Dialog添加append-to-body后修改原样式无效，如何解决使用append-t后覆盖修改样式不生效，嵌套的append-to-body属性导致内层弹框样式设置不上，append-to-body后更改d
Vue - ElementUI 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
王二红
03-20 3875
vue2，element-ui，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，在elementui组件库中，使用el-drawer抽屉弹框组件，当设置append-to-body属性后，无法使用deep进行样式覆盖怎么办，关于vue+element中el-dialog设置append-to-body样式不生效问题，vue2elementUIel-dialog修改了body样式不生效问题解决方案，element组件
使用Vue3 + ElementPlus，让抽屉（el-drawer）显示在对话框（el-dialog）中
qq_48651377的博客
05-11 1983
定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。解决办法：将抽屉的遮罩定位到对话框上，即。属性自定义遮罩的css样式，
element-plus里面的抽屉Drawer的使用
weixin_60353902的博客
04-10 1917
思路： 1，父组件定义触发按钮的方法（暂时定义空方法，不写逻辑） 2. 子组件，写抽屉代码，给抽屉添加v-mode，双向绑定的变量 的值为布尔值true/false，打开/关闭抽屉 3.子组件向外暴露一个方法，方法内容为v-model的值等于= true，打开抽屉 4. 父组件在子组件标签上面添加ref属性，用以打标记，便于引用子组件 5. 定义父组件按钮的代码逻辑：引用子组件暴露的方法。打开了抽屉
Element-Plus select选择器-下拉组件错位bug（有高度滚动时）
weixin_46873254的博客
07-03 1845
element-ui、element-plus select选择器，下拉菜单滚动时错位
element plus 中 Drawer 抽屉开启后不能点击外部元素问题
jiangjunyuan168的博客
12-11 3656
在开发 vue3 项目的过程中，使用 Element Plus 的 Drawer 抽屉时抽屉弹出后点击外部元素没有反应。
详细分析Element中的Drawer（附Demo）
码农研究僧的博客
05-21 2377
Drawer 组件可以用于从屏幕的边缘滑入一个面板，用来显示额外的内容而不会离开当前页面视图
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
在这个特定的案例中，我们讨论的是如何在Element UI的基础上自定义Dialog（对话框）和Drawer（抽屉）组件，以实现无覆盖和可拖拽的功能。 Dialog组件通常用于显示临时的信息或者进行一些交互操作，而Drawer则常用于...
【区分vue2和vue3下的element UI Drawer 抽屉组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
07-18 903
在 Vue 2 中，Element UI 提供了 Drawer 抽屉组件，而在 Vue 3 中，相应的库是 Element Plus，它也提供了类似的 Drawer 组件。虽然它们的功能相似，但在属性、事件和方法的命名上可能会有所不同，以符合 Vue 3 的新特性和改进。
element ui 手动关闭Drawer抽屉组件的方法
qq_46239972的博客
05-02 9950
element ui 手动关闭Drawer抽屉组件的方法 在element ui的官方文档中给出了关闭Drawer组件的方法，但是在文档中并没有给出具体的示例，而且这个方法的说明也没有给出具体的方法。 我这里有一个需要通过点击抽屉内的按钮在完成一定的功能后顺便关闭抽屉组件的需求，可以像以下这么完成。 首先在需要操作的抽屉组件上使用ref来将抽屉组件的实例信息注册到父组件也就是当前文件的自定义组件的的ref对象上，然后直接在自定义组件的方法中使用刚刚注册到ref对象上，然后直接在自定义组件的方法中使用刚
VUE组件中的 Drawer 抽屉实现代码
10-16
Vue组件中的Drawer抽屉是一种常见的交互组件，它允许开发者在页面上实现一种侧边滑出的交互效果，类似于抽屉的打开与关闭。通过使用Vue.js框架，开发者可以通过自定义组件的方式实现Drawer抽屉效果。在实现过程中，...
vue3+elementPlus：el-drawer新增修改弹窗复用
意初的博客
12-27 1812
vue3+elementPlus：el-drawer新增修改弹窗复用。在el-drawer的属性里设置:title属性，和重置函数。
vue3--element-plus-抽屉文件上传和富文本编辑器
G24gg的博客
05-04 3046
element-plus下Update实现上传文件 配置属性： action：上传文件的服务器地址。 :on-success和:on-error：分别是上传成功和失败时的回调函数。 before-upload：文件上传前的钩子函数，可以在这里进行文件类型、大小等的校验。 ref="upload"：为组件设置一个引用，方便在方法中调用。 list-type="text"：定义上传列表的展示方式，这里使用text类型，不展示文件列表。
到结尾一切正常，但是到element-plus是还是出bug了，直接从hami076变成075了
weixin_40945354的博客
10-24 66
bug还是那个use的bug。 再调吧。
Element组件的坑: 抽屉drawer和弹窗dialog
一只卑微的菜狗的博客
10-23 6881
针对Element框架的el-drawer添加了子组件不能渲染子组件问题（el-dialog同样适用），包括el-drawer抽屉组件显示隐藏问题以及在指定容器打开抽屉组件
element-ui关于el-drawer抽屉的一点小bug总结
Ｓｈａｄｏｗ的专栏
10-10 2170
这可不行,页面抖动这不能交付啊.查找原因,搜遍了网络没找到一点点有用的东西,全是那几条原创来回被传.头疼. 后来忘了哪里得来的灵感,说是这个抽屉出来的时候改变了高度什么的,导致页面左移了一个滚动条的宽度,只需要将页面最大高度设置成。没什么结果,算了,自己找找原因吧. 上面提到完全引入和按需引入的情况,想着是不是样式出了问题,结果经过控制台查看vue的插件,发现了很多官方文档没有提及的属性.而且有很多是官方文档给出的,挨个试试,不了发现了惊喜!不行,这东西需要搞样式了.方式四:(方式三+方式四 =完美版)
记录一个使用element-plus表格的bug
q1553048604的博客
12-25 582
bug修复，虽然解决了，但希望大佬能讲解讲解原理
ElementUI 组件的坑之Drawer
GAMEOVER_Lv9的博客
07-20 3032
ElementUI 组件的坑之DrawerDrawer的destroy-on-close问题方法 Drawer的destroy-on-close 问题 这个属性会被它自己的before-close属性影响， 当你使用before-close的时候，destroy-on-close会失效。如果你在抽屉里面的使用了别的组件，而又需要它在被创建的时候去访问某些接口的时候，你会发现，你无法得到你想要的效果。这就很烦。这个时候，不管是mounted()还是created(),都不会被再次执行，因为，你的组件没有被销毁
elementUI_drawer踩坑_抽屉关闭问题
qq_43260366的博客
08-02 3870
做一个如上抽屉弹框，页面关闭使用的是右上角的 “X” 按钮(elementUI内部封装的)直接将抽屉写在当前页面中，关闭抽屉时–>点击页面其他地方没有任何问题；需求：当点击 ”信息详情“ 按钮时，显示一个弹框显示详情内容；当点击“X”按钮时，我们手动修改属性的值；............
侧滑狂el-drawer
最新发布
01-09
### 关于 Element UI `el-drawer` 组件侧滑效果异常解决方案 #### 一、版本控制的重要性 遇到两次未锁定Element Plus版本的情况，打包后的样式混乱以及逻辑变化等问题表明了项目依赖库版本管理的重要性[^1]。对于前端开发而言，确保使用的UI框架版本稳定是避免诸多兼容性和功能性问题的关键。 #### 二、针对遮罩层存在的处理方法 设置`modal="false"`后仍然存在遮罩元素的问题可以通过自定义CSS来覆盖默认行为。具体来说： ```css /* 覆盖原有样式 */ .el-drawer__wrapper { /* 移除背景色 */ background-color: transparent !important; } /* 如果需要完全移除点击事件 */ .el-drawer.rtl::before, .el-overlay { display: none!important; } ``` 上述代码片段通过强制修改`.el-drawer__wrapper`类的背景颜色为透明，并隐藏掉右侧抽屉(`rtl`)前缀下的伪元素及全局遮罩层(`.el-overlay`)达到关闭模态框的效果。 #### 三、确认标签名称准确性 有提到使用`<el-sub-menu>`而非官方推荐的`<el-submenu>`可能导致某些功能无法正常工作[^3]。因此建议仔细核对文档中给出的确切语法结构，确保HTML/JSX模板内的组件名拼写无误。 #### 四、考虑初始化时机与DOM渲染顺序 当在`Drawer`内嵌入子路由时可能会遭遇由于动画过程影响到实际页面加载进度而引发的各种BUG。一种可行的办法是在Vue生命周期钩子函数里延迟执行相关操作直到整个视图树构建完毕再进行下一步动作；另一种思路则是利用Vuex状态管理模式配合异步组件懒加载机制优化整体性能表现[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冬问春风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值