vue 點擊其他區域關閉自定義div

1、vue模塊中的內容

<template>
     <div class="hello"  @click="hidePanel">
          <div id="myPanel" v-if="panelShow"></div>
     </div>
</template>

 第一步，我們在自己的vue模塊中整體添加了一個hidePanel事件，准備整體區域進行點擊，然后id為myPanel的div是我們要處理的那個小組件。

 

2、定義變量

data () {
   return {
       panelShow: true
   }
}

 

3、第三步才是重點，其實大家都知道，要觸發一個事件，然后這個事件還是點擊事件，點擊到我們這個id是 myPanel以外的地方才進行一些操作，也就是把panelShow賦值為false

methods: {
  hidePanel: function(event){
     let sp = document.getElementById("myPanel");
     if(sp){
        if(!sp.contains(event.target)){//這句是說如果我們點擊到了id為myPanel以外的區域
           this.panelShow = false;
        }
     }
  }
}