首页 新闻 会员 周边

在Vue中如何实现点击其他区域使特定元素消失?

0
悬赏园豆:5 [已解决问题] 解决于 2023-02-05 13:48

想要实现类似Bilibili收藏视频或CSDN收藏文章的效果。其中有个功能是这样的:用户点击收藏按钮后,弹出收藏窗口,用户希望新建收藏夹来收藏对象,于是点击“新建收藏夹”按钮,之后“新建收藏夹”按钮消失,在新建收藏夹按钮的位置出现新建收藏夹表单,如果用户不想新建收藏夹了,点击收藏窗口的其他位置,新建收藏夹表单将消失,同时新建收藏夹按钮重新出现。

我想实现的功能就是点击收藏窗口的其他位置,新建收藏夹表单消失。我参考了vue2.0 点击其他区域关闭自定义div_xingyu_qie的博客-CSDN博客_vue点击其他地方隐藏div。注册了一个全局点击事件监听函数,在这个监听函数中检查:如果点击的区域不是收藏夹表单,表单就会消失。但是没有效果,点击收藏窗口的其他位置,表单不会消失。使用console.log()发现,点击收藏窗口不会触发全局点击事件,只有点击其他位置才会触发全局点击事件。我使用的弹出窗口是element-plus的Dialog组件,在Dialog组件的点击事件上绑定了这个监听函数也没有用。

不知道问题出在哪里?

Halloworlds的主页 Halloworlds | 初学一级 | 园豆:190
提问于:2022-05-02 23:42
< >
分享
最佳答案
1

应该是表单的失去焦点事件吧(@blur),当焦点离开表单时触发失去焦点事件,然后隐藏表单,显示按钮
试试看

收获园豆:4
顾星河 | 大侠五级 |园豆:7240 | 2022-05-05 15:13

对哦,我怎么没想到这个

Halloworlds | 园豆:190 (初学一级) | 2022-05-09 15:07

input元素的失焦事件确实可以解决这个问题,但是还不完美。我希望实现的功能是点击其他区域表单消失,但是点击表单中的提交按钮将会向后端服务器提交新收藏夹名字,然后表单才消失。可是我发现,当我点击表单中的提交按钮,整个表单立刻消失了,按钮的提交函数也没执行。我想可能是在触发按钮的点击事件之前就已经触发了input元素的失焦事件,导致按钮消失,结果按钮的点击事件也没能执行。

还有什么其他的解决方案吗?

Halloworlds | 园豆:190 (初学一级) | 2022-05-15 23:40

@Halloworlds: 直接绑定弹窗的close事件就可以了

Halloworlds | 园豆:190 (初学一级) | 2023-03-05 10:34
其他回答(1)
0

点击收藏窗口不会触发全局点击事件,那你给收藏窗口注册一个监听点击事件不就好了吗,这样会触发了吧

收获园豆:1
飞天狼 | 园豆:203 (菜鸟二级) | 2022-07-15 09:33

窗口不能绑定点击事件。我使用的窗口是element-plus的Dialog组件,这个组件上不能绑定点击事件。具体能绑定哪些事件可以参考Dialog 对话框 | Element Plus (gitee.io)

支持(0) 反对(0) Halloworlds | 园豆:190 (初学一级) | 2022-07-17 13:42
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册