在Vue中如何实现点击其他区域使特定元素消失？
0
悬赏园豆：5
[已解决问题]
解决于 2023-02-05 13:48
想要实现类似Bilibili收藏视频或CSDN收藏文章的效果。其中有个功能是这样的：用户点击收藏按钮后，弹出收藏窗口，用户希望新建收藏夹来收藏对象，于是点击“新建收藏夹”按钮，之后“新建收藏夹”按钮消失，在新建收藏夹按钮的位置出现新建收藏夹表单，如果用户不想新建收藏夹了，点击收藏窗口的其他位置，新建收藏夹表单将消失，同时新建收藏夹按钮重新出现。
我想实现的功能就是点击收藏窗口的其他位置，新建收藏夹表单消失。我参考了vue2.0 点击其他区域关闭自定义div_xingyu_qie的博客-CSDN博客_vue点击其他地方隐藏div。注册了一个全局点击事件监听函数，在这个监听函数中检查：如果点击的区域不是收藏夹表单，表单就会消失。但是没有效果，点击收藏窗口的其他位置，表单不会消失。使用console.log()发现，点击收藏窗口不会触发全局点击事件，只有点击其他位置才会触发全局点击事件。我使用的弹出窗口是element-plus的Dialog组件，在Dialog组件的点击事件上绑定了这个监听函数也没有用。
不知道问题出在哪里？
最佳答案
1
应该是表单的失去焦点事件吧（@blur），当焦点离开表单时触发失去焦点事件，然后隐藏表单，显示按钮
试试看
收获园豆：4
对哦，我怎么没想到这个
input元素的失焦事件确实可以解决这个问题，但是还不完美。我希望实现的功能是点击其他区域表单消失，但是点击表单中的提交按钮将会向后端服务器提交新收藏夹名字，然后表单才消失。可是我发现，当我点击表单中的提交按钮，整个表单立刻消失了，按钮的提交函数也没执行。我想可能是在触发按钮的点击事件之前就已经触发了input元素的失焦事件，导致按钮消失，结果按钮的点击事件也没能执行。
还有什么其他的解决方案吗？
@Halloworlds: 直接绑定弹窗的close事件就可以了
其他回答(1)
0
点击收藏窗口不会触发全局点击事件，那你给收藏窗口注册一个监听点击事件不就好了吗，这样会触发了吧
收获园豆：1
窗口不能绑定点击事件。我使用的窗口是element-plus的Dialog组件，这个组件上不能绑定点击事件。具体能绑定哪些事件可以参考Dialog 对话框 | Element Plus (gitee.io)。
