Element组件 Drawer 抽屉的关闭问题

场景

我使用的Drawer 抽屉是从上往下开的效果,点击搜索图标,从上往下开没问题,输入关键字搜索,搜索出来的列表放置于搜索栏下面,所以使用了一个子组件

问题就来了

搜出来的列表item,点击任意一条,地址栏的路由是变化了,但是这个Drawer 抽屉不会主动关闭,

解决思路

把父组件关于Drawer的实例,传到子组件去,代码如下

再在子组件里通过pros接收 ,代码如下

这是测试功能,点击就能主动关闭了,不需要再点击它自带的关闭按钮。

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
可以使用 Vue3 和 Element Plus 的 Drawer 组件来封装一个抽屉组件。首先需要在组件中引入 Drawer 组件,然后在模板中使用 Drawer 组件的属性和事件来实现抽屉的展示和隐藏。 以下是一个简单的抽屉组件代码示例: ```vue <template> <el-drawer :visible="visible" :title="title" :size="size" :direction="direction" :before-close="beforeClose" @open="handleOpen" @close="handleClose" > <slot></slot> </el-drawer> </template> <script> import { ref } from 'vue'; import { ElDrawer } from 'element-plus'; export default { name: 'MyDrawer', components: { ElDrawer, }, props: { visible: { type: Boolean, default: false, }, title: { type: String, default: '', }, size: { type: String, default: '30%', }, direction: { type: String, default: 'rtl', }, }, setup(props, { emit }) { const beforeClose = (done) => { // 可以在这里添加关闭前的逻辑 done(); }; const handleOpen = () => { emit('update:visible', true); }; const handleClose = () => { emit('update:visible', false); }; return { beforeClose, handleOpen, handleClose, }; }, }; </script> ``` 在父组件中使用该抽屉组件时,可以通过 v-model 来控制抽屉的显示和隐藏: ```vue <template> <div> <el-button @click="visible = true">打开抽屉</el-button> <my-drawer v-model="visible" title="抽屉标题"> 抽屉内容 </my-drawer> </div> </template> <script> import MyDrawer from './MyDrawer.vue'; export default { components: { MyDrawer, }, data() { return { visible: false, }; }, }; </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

1学习者1

打赏作者一杯咖啡与妹子坐坐吧

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

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

打赏作者

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

抵扣说明:

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

余额充值