The Vue component closes itself by clicking on a blank space

When A component A needs to close itself when clicking another blank space. Normally we execute the close function when the window or document is bound to the click event and then clicked.

$(window).on('click'.this.closeHelp);
Copy the code

But what if component A (such as MFC-help-tips) is inside another component B, and component B (such as A pop-up component) has @click.stop on its outermost layer, so that clicking on component B cannot close component A?

Method one:

Remove @click.stop from the outermost layer of component B, but it may cause other problems for component B (because @click.stop must be added for a reason).

Method two (recommended) :

A component props:

props:{
  closeSelector:{
    type:[String,Object]
  }
},
Copy the code

In Mounted, if a selector is passed to B, B will click to execute the shutdown function:

mounted:function(){
  this.closeSelector && $(this.closeSelector).click(this.closeHelp);
},
Copy the code

(after)

Today is day 1/100 of the front note.