vue.js（3.0）如何实现点击下拉列表或者弹出框以外的区域即可关闭下拉列表或者弹出框

背景：开发过程中，往往需要点击某个按钮或者地方，出现一个弹框进行选择，当用户在下拉列表的范围内进行鼠标点击的时候，关闭已经打开的下拉列表，如下图所示

解决思路：在DOM根节点上添加一个click事件，同时下拉列表阻止事件的冒泡，当响应这个点击事件的时候，说明在点击下拉列表范围外的点击（因为下拉列表内组织了事件的冒泡），就可以关闭已经打开的下拉列表
（因为在一个完整的应用中，可能会有很多场景需要这种区域外点击关闭的功能，比较合适的做法是把点击事件的具体处理逻辑放到各个组件中去），那么如何让各个子组件响应根组件上的点击事件呢？可以用vuex来做这一点，这里vuex起到了组件之间相互传递信息的作用
具体实现如下：
1.在store里面创建按一个变量，用来存储控制隐藏出现的变量

2…在根节点中绑定点击事件：

3.在需要使用的组件中监听store里面这个变量的改变。从而收起下拉框或者其他组件

其他组件里面有需要的地方同样可以直接使用