最好是采用一個(gè)透明的遮罩層進(jìn)行點(diǎn)擊事件從而達(dá)到隱藏

為什么不采用監(jiān)聽body的監(jiān)聽事件呢，一方面是因?yàn)榭赡軙l(fā)生點(diǎn)擊事故，就是不小心點(diǎn)到其他a標(biāo)簽、跳轉(zhuǎn)標(biāo)簽或者事件觸發(fā)元素，會直接觸發(fā)其他函數(shù)或者跳轉(zhuǎn)頁面；另一方面是因?yàn)榭删S護(hù)性不好，假設(shè)可以通過點(diǎn)擊多個(gè)元素關(guān)閉，那么需要挨個(gè)判斷id。

所以正常解決辦法一種是按照樓上的：

 <div class="box-container" @click.self="toggleBox"> <!-- self的作用是阻止冒泡，點(diǎn)擊box區(qū)域時(shí)，box不會消失 -->

        <div class="box" v-show="showBox">

          {{message}}

        </div>

      </div>

一種是單獨(dú)寫一個(gè)遮罩層組件，可以隨時(shí)使用（原理差不多，代碼就不寫了）：可以通過slot或者自定義屬性來進(jìn)行控制哪個(gè)元素的開閉。