当一个组件A需要在点击其他空白位置时执行关闭自身函数。
一般我们会在window
或者document
绑定click
事件,再点击的时候执行关闭函数。
$(window).on('click', this.closeHelp);
但是如果该组件A(比如mfc-help-tips)在另一个组件B内部,而且B组件(比如弹框组件)在最外层有 @click.stop
,这样的话,点击B组件,A组件是无法关闭的,怎么办?
方法一:
去掉B组件最外层的@click.stop
,但是可能会造成B组件其他问题(因为B增加@click.stop
肯定是有原因的)。
方法二(推荐):
A组件增加props:
props:{
closeSelector:{
type:[String,Object]
}
},
然后在mounted中判断,当传入B组件的选择器时,B组件点击执行关闭函数:
mounted:function(){
this.closeSelector && $(this.closeSelector).click(this.closeHelp);
},
(完)