前端队长の技术博客

当一个组件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);
},

(完)