方法一: 给外层容器定义一个阻止冒泡事件 @click.stop
,则该容器内的点击不会传递到外层容器,所以全局监听不到该点击事件,在该容器内部点击不会触发点击函数。当弹框出现时,点击外部空白区域,弹框关闭。
方法二: 给外层容器设置一个 ref="mian"
,当 visible为 true时,弹框出现。在该容器外点击 this.$refs.main.$el.contains(e.target)
为 false,在容器内点击则为 true。
两种方法都需要组件挂载完毕,全局添加一个点击事件,组件注销前,将点击事件移除。