Click somewhere outside the specified area to trigger closure

Method one: the document. The addEventListener method to monitor the global, and click on the designated area

document.addEventListener('click',e => { if(! This.$refs.xxx.contains(e.get)){this.show= false}else{this.show= true}})Copy the code

Method 2: Bind an event in the outermost layer, specifying the locale binding @click.stop to prevent bubbling

<>div @click="click1"> Outer <div @click.stop="click2"> specified area </div> </div> click1(){this.show=false; }, click2(){ this.show=true; }Copy the code