element ui 手动关闭Drawer抽屉组件的方法

最新推荐文章于 2024-07-20 16:08:33 发布
最新推荐文章于 2024-07-20 16:08:33 发布
阅读量9.5k 收藏 11
点赞数 8
分类专栏： 前端 文章标签： vue elementui javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46239972/article/details/116356454
版权
本文介绍了如何在Vue中手动关闭Element UI的Drawer抽屉组件。通过在抽屉组件上设置ref，然后在父组件中引用该ref，调用组件的关闭方法实现。这种方法在完成特定功能后关闭抽屉，既方便又实用。尽管作者不确定是否是最标准的做法，但实际操作中证实是可行的。
摘要由CSDN通过智能技术生成
element ui 手动关闭Drawer抽屉组件的方法

在这里插入图片描述

在element ui的官方文档中给出了关闭Drawer组件的方法，但是在文档中并没有给出具体的示例，而且这个方法的说明也没有给出具体的说明。

我这里有一个需要通过点击抽屉内的按钮在完成一定的功能后顺便关闭抽屉组件的需求，可以像以下这么完成。

在这里插入图片描述
在这里插入图片描述

首先在需要操作的抽屉组件上使用ref来将抽屉组件的实例信息注册到父组件也就是当前文件的自定义组件的的 r e f 对 象 上 ， 然 后

最低0.47元/天 解锁文章
whitexxxkkk
关注
专栏目录
Element-UI中的Drawer 抽屉如何关闭
qq_54180801的博客
09-10 5371
Element-UI中的Drawer 抽屉如何关闭
Element组件 Drawer 抽屉的关闭问题
热门推荐
u011280778的博客
09-07 2万+
场景 我使用的Drawer 抽屉是从上往下开的效果，点击搜索图标，从上往下开没问题，输入关键字搜索，搜索出来的列表放置于搜索栏下面，所以使用了一个子组件 问题就来了 搜出来的列表item，点击任意一条，地址栏的路由是变化了，但是这个Drawer 抽屉不会主动关闭， 解决思路 把父组件关于Drawer的实例，传到子组件去，代码如下 再在子组件里通过pros接收 ，代码如下 ...
基于element ui的el-drawer进行组件封装
最新发布
辞忧*的博客
07-20 431
【代码】基于element ui的el-drawer进行组件封装。
如何添加关闭el-drawer功能
weixin_44099060的博客
05-14 2025
在方法中加入 this.$refs.drawerRefName.closeDrawer() 其中drawerRefName是抽屉ref属性值
element UI中关闭Drawer 抽屉时如何彻底销毁其中的内容和数据
m0_70726976的博客
09-07 1805
在Drawer组件中设置了destroy-on-close=“true”,文档说关闭时销毁 Drawer 中的元素，但是 在设置visible 抽屉的显示跟隐藏时，没有执行销毁。
引用element-ui的Drawer抽屉组件报错问题
qq_34498806的博客
08-11 1823
引用element-ui的Drawer抽屉组件报错问题 **前提：**vue项目采取按需引入的方式引入element，并且使用其他组件都正常，没有发生异常 问题表现： 在vue项目中引用了Drawer 抽屉组件，结果报错 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YdWjwtt9-1628652959203) 意思就是组件未注册，当时我的表情： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-INeMeOti-1628652959205)
element-ui vue el-drawer抽屉
daddykei的博客
07-27 2082
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g.
Element组件的坑: 抽屉drawer和弹窗dialog
一只卑微的菜狗的博客
10-23 5752
针对Element框架的el-drawer添加了子组件不能渲染子组件问题（el-dialog同样适用），包括el-drawer抽屉组件显示隐藏问题以及在指定容器打开抽屉组件
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
总的来说，自定义Element UI的Dialog和Drawer组件，以实现无覆盖和可拖拽特性，是提高用户体验和丰富交互设计的一种方法。通过深入理解和实践，开发者可以更好地掌握Vue.js和前端组件化的开发技巧。
如何给element添加一个抽屉组件的方法步骤
10-16
在Vue框架中使用Element UI组件库实现一个抽屉组件涉及到几个核心知识点，本文将详细解读如何基于Element UI添加自定义抽屉组件的步骤和细节。 首先，要了解什么是抽屉组件。在用户界面设计中，抽屉（Drawer）组件...
element ui实现抽屉效果_如何给element添加一个抽屉组件的方法步骤
weixin_29355333的博客
02-15 2216
近来因为业务需要，对比iview和element库，发现element确实要比实习期间使用的iview强大点，尤其文档更为友好，但是iview的组件功能更多一点，比如分割线和抽屉组件今天特意手写一个抽屉组件，方便自己使用element库，写好的组件我已经放在我的githup了， 点这里一、实践1.分析一个抽屉组件的z-index必定是在当前页面之上的，在抽屉主体之外的区域还会有一层半透明的遮罩层，...
Element-UI组件自带方法的使用
happy81997的博客
11-29 5144
Element-UI组件很多自带一些方法，这些方法如何调用： 1、组件上添加ref 2、使用： this.$refs.tclb.closeDrawer()
element-ui drawer 组件源码分享
qq_37309987的博客
04-08 1191
2.7 modal-append-to-body 属性，遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上，类型 boolean，默认 true。2.2 before-close 属性，关闭前的回调，会暂停 Drawer 的关闭，类型 function(done)，done 用于关闭 Drawer，无默认值。2.12 visible 属性，是否显示 Drawer，支持 .sync 修饰符，类型 boolean，默认 false。
ElementUI自定义el-dialog关闭按钮
weixin_45336090的博客
02-24 1476
<el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible" custom-class="close_class"> </el-dialog> <style lang="less" scoped> /deep/ .close_class { .el-dialog__headerbtn { background: url('图片路径'); background-siz
element ui中el-drawer点击遮罩无法关闭
PinelliaLogic的博客
12-11 1217
element ui中el-drawer点击遮罩无法关闭
element plus 中 Drawer 抽屉开启后不能点击外部元素问题
jiangjunyuan168的博客
12-11 2520
在开发 vue3 项目的过程中，使用 Element Plus 的 Drawer 抽屉时抽屉弹出后点击外部元素没有反应。
vue el-drawer进入重新加载、关闭销毁
q249859693的博客
07-13 9885
vue el-drawer进入重新加载、关闭销毁
封装element-ui中的Drawer（抽屉）
weixin_46419373的博客
03-26 7569
之前我都不知道有drawer这个方法，平常对于那些弹框我一般习惯用dialog这个组件。然而前几天，我发现，drawer也用起来不错，便想起来，把他封装起来，好复用。下面呢，就直接上代码了 <template> <el-drawer :title="title" :visible.sync="drawer" :custom-class="className" :modal-append-to-body="false" :size="outSize
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值