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

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

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

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

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

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

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

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

希望有大佬帮们解答

冬问春风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue3 - Element Plus 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
王佳斌
03-20 3014
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
element ui 手动关闭Drawer抽屉组件的方法
qq_46239972的博客
05-02 9548
element ui 手动关闭Drawer抽屉组件的方法 在element ui的官方文档中给出了关闭Drawer组件的方法，但是在文档中并没有给出具体的示例，而且这个方法的说明也没有给出具体的方法。 我这里有一个需要通过点击抽屉内的按钮在完成一定的功能后顺便关闭抽屉组件的需求，可以像以下这么完成。 首先在需要操作的抽屉组件上使用ref来将抽屉组件的实例信息注册到父组件也就是当前文件的自定义组件的的ref对象上，然后直接在自定义组件的方法中使用刚刚注册到ref对象上，然后直接在自定义组件的方法中使用刚
element drawer使用中遇到的坑点
热门推荐
峰会路转的博客
04-29 1万+
业务需求是新增编辑时清空点击编辑按钮时的回显数据 需要清空 el-drawer 里面的数据，有表单，也有不是表单的数据 父组件 <el-drawer ref="drawer" :title="title" size="100%" :visible.sync="drawer" :direction="direction" :before-close="handleClose" close-on-pre
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽
element plus 中 Drawer 抽屉开启后不能点击外部元素问题
最新发布
qq_38210427的博客
08-09 340
发现外层包裹的 div 添加了 mask-layer 类名，之后继续修改该元素的样式，因为是点击不到外部的元素，所以可能是遮罩层的层级较高将后面的元素覆盖了，所以作者对其宽度缩减到与抽屉组件相同的宽度。因为抽屉组件本身是带有遮罩层，所以作者猜想这一层元素是 Drawer 抽屉组件的遮罩层元素，随后添加了关于遮罩层的配置属性来验证猜想。测试后发现该属性并不能解决该问题，该属性仅仅是通过类似于v-show的方式设置遮罩层是否展示及隐藏，其元素还是会一直存在于文档流当中。
element-plus里面的抽屉Drawer的使用
weixin_60353902的博客
04-10 1186
思路： 1，父组件定义触发按钮的方法（暂时定义空方法，不写逻辑） 2. 子组件，写抽屉代码，给抽屉添加v-mode，双向绑定的变量 的值为布尔值true/false，打开/关闭抽屉 3.子组件向外暴露一个方法，方法内容为v-model的值等于= true，打开抽屉 4. 父组件在子组件标签上面添加ref属性，用以打标记，便于引用子组件 5. 定义父组件按钮的代码逻辑：引用子组件暴露的方法。打开了抽屉
Element-Plus select选择器-下拉组件错位bug（有高度滚动时）
weixin_46873254的博客
07-03 1640
element-ui、element-plus select选择器，下拉菜单滚动时错位
使用Vue3 + ElementPlus，让抽屉（el-drawer）显示在对话框（el-dialog）中
qq_48651377的博客
05-11 1172
定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。解决办法：将抽屉的遮罩定位到对话框上，即。属性自定义遮罩的css样式，
VUE组件中的 Drawer 抽屉实现代码
10-16
Vue组件中的Drawer抽屉是一种常见的交互组件，它允许开发者在页面上实现一种侧边滑出的交互效果，类似于抽屉的打开与关闭。通过使用Vue.js框架，开发者可以通过自定义组件的方式实现Drawer抽屉效果。在实现过程中，...
如何给element添加一个抽屉组件的方法步骤
10-16
在Vue框架中使用Element UI组件库实现一个抽屉组件涉及到几个核心知识点，本文将详细解读如何基于Element UI添加自定义抽屉组件的步骤和细节。 首先，要了解什么是抽屉组件。在用户界面设计中，抽屉（Drawer）组件...
详细分析Element中的Drawer（附Demo）
码农研究僧的博客
05-21 1418
Drawer 组件可以用于从屏幕的边缘滑入一个面板，用来显示额外的内容而不会离开当前页面视图
vue3+elementPlus：el-drawer新增修改弹窗复用
意初的博客
12-27 1568
vue3+elementPlus：el-drawer新增修改弹窗复用。在el-drawer的属性里设置:title属性，和重置函数。
到结尾一切正常，但是到element-plus是还是出bug了，直接从hami076变成075了
weixin_40945354的博客
10-24 47
bug还是那个use的bug。 再调吧。
element-ui关于el-drawer抽屉的一点小bug总结
Ｓｈａｄｏｗ的专栏
10-10 1943
这可不行,页面抖动这不能交付啊.查找原因,搜遍了网络没找到一点点有用的东西,全是那几条原创来回被传.头疼. 后来忘了哪里得来的灵感,说是这个抽屉出来的时候改变了高度什么的,导致页面左移了一个滚动条的宽度,只需要将页面最大高度设置成。没什么结果,算了,自己找找原因吧. 上面提到完全引入和按需引入的情况,想着是不是样式出了问题,结果经过控制台查看vue的插件,发现了很多官方文档没有提及的属性.而且有很多是官方文档给出的,挨个试试,不了发现了惊喜!不行,这东西需要搞样式了.方式四:(方式三+方式四 =完美版)
Element组件的坑: 抽屉drawer和弹窗dialog
一只卑微的菜狗的博客
10-23 5719
针对Element框架的el-drawer添加了子组件不能渲染子组件问题（el-dialog同样适用），包括el-drawer抽屉组件显示隐藏问题以及在指定容器打开抽屉组件
记录一个使用element-plus表格的bug
q1553048604的博客
12-25 479
bug修复，虽然解决了，但希望大佬能讲解讲解原理
ElementUI 组件的坑之Drawer
GAMEOVER_Lv9的博客
07-20 2864
ElementUI 组件的坑之DrawerDrawer的destroy-on-close问题方法 Drawer的destroy-on-close 问题 这个属性会被它自己的before-close属性影响， 当你使用before-close的时候，destroy-on-close会失效。如果你在抽屉里面的使用了别的组件，而又需要它在被创建的时候去访问某些接口的时候，你会发现，你无法得到你想要的效果。这就很烦。这个时候，不管是mounted()还是created(),都不会被再次执行，因为，你的组件没有被销毁
elementUI_drawer踩坑_抽屉关闭问题
qq_43260366的博客
08-02 3603
做一个如上抽屉弹框，页面关闭使用的是右上角的 “X” 按钮(elementUI内部封装的)直接将抽屉写在当前页面中，关闭抽屉时–>点击页面其他地方没有任何问题；需求：当点击 ”信息详情“ 按钮时，显示一个弹框显示详情内容；当点击“X”按钮时，我们手动修改属性的值；............
element-plus点击抽屉中按钮抽屉关闭
06-29
在Element Plus库中，如果你想实现点击抽屉中的某个按钮使抽屉关闭，你可以使用`ElDrawer`组件提供的`close`方法或者事件。以下是一个简单的示例： ```html <template> <el-drawer v-model="drawerOpen" title="抽屉标题" :width="200" @clickoutside="handleOutsideClick" > <div slot="footer"> <button @click="handleClose">关闭抽屉</button> </div> </el-drawer> </template> <script> export default { data() { return { drawerOpen: true, // 初始状态为打开 }; }, methods: { handleClose() { this.drawerOpen = false; // 当点击按钮时，关闭抽屉 }, handleOutsideClick() { if (this.drawerOpen) { this.drawerOpen = false; // 如果点击抽屉外部，也关闭抽屉 } }, }, }; </script> ``` 在这个例子中，`v-model="drawerOpen"`绑定了抽屉的打开/关闭状态。`handleClose`方法在按钮被点击时调用，而`handleOutsideClick`则在抽屉外部被点击时触发，关闭抽屉。 相关问题： 1. 抽屉组件的`v-model`属性通常用于控制什么？ 2. `@clickoutside`事件在Element Plus中的作用是什么？ 3. 如何区分用户点击的是抽屉内的按钮还是抽屉外部？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

冬问春风

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

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

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

打赏作者

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

抵扣说明：

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

余额充值