vue实现点击空白关闭弹窗,模拟下拉框Dropdown

方法一: 给外层容器定义一个阻止冒泡事件 @click.stop,则该容器内的点击不会传递到外层容器,所以全局监听不到该点击事件,在该容器内部点击不会触发点击函数。当弹框出现时,点击外部空白区域,弹框关闭。

方法二: 给外层容器设置一个 ref="mian",当 visible为 true时,弹框出现。在该容器外点击 this.$refs.main.$el.contains(e.target)为 false,在容器内点击则为 true。

两种方法都需要组件挂载完毕,全局添加一个点击事件,组件注销前,将点击事件移除。

Read more