首页 新闻 搜索 专区 学院

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

0
悬赏园豆:5 [待解决问题]

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

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

不知道问题出在哪里?

Halloworlds的主页 Halloworlds | 初学一级 | 园豆:195
提问于:2022-05-02 23:42
< >
分享
所有回答(1)
1

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

默卿 | 园豆:6127 (大侠五级) | 2022-05-05 15:13

对哦,我怎么没想到这个

支持(0) 反对(0) Halloworlds | 园豆:195 (初学一级) | 2022-05-09 15:07

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

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

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