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

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

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

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

首先在需要操作的抽屉组件上使用ref来将抽屉组件的实例信息注册到父组件也就是当前文件的自定义组件的的 r e f 对 象 上 , 然 后 直 接 在 自 定 义 组 件 的 方 法 中 使 用 刚 刚 注 册 到 ref对象上,然后直接在自定义组件的方法中使用刚刚注册到 ref对象上,然后直接在自定义组件的方法中使用刚刚注册到ref里面的抽屉组件的实例,然后再调用官方文档中给出的关闭抽屉组件的方法即可。

我这里就是直接在抽屉组件内的组件点击事件中调用的抽屉组件的关闭方法,这样就可以在正确完成不影响功能的前提下关闭抽屉组件。

可以看到整个过程还是十分方便的,如果不将设置事件单独算作一个步骤的话,那么总得来说其实只需要两步即可,即:注册抽屉组件实例到父组件中、在事件方法中获取抽屉组件并调用抽屉组件关闭方法。

因为我对vue和element ui了解的还都不多,并不知道这是不是实现这个功能的最简单和最标准的做法,但是从方便程度还有功能实现上来讲这种做法还是没有什么问题的。

同理,在了解了这一种使用官方文档上给出的方法后,其他我们不了解的组件方法也可以尝试使用这种方式来使用。

经验分享 程序员 微信小程序 职场和发展