小編給大家分享一下Vue怎么實(shí)現(xiàn)點(diǎn)擊當(dāng)前元素以外的地方隱藏當(dāng)前元素，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)自2013年起，先為臨城等服務(wù)建站，臨城等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為臨城企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

1. 綁定元素

2. mounted生命周期

3. 實(shí)現(xiàn)思路

• 頁面掛載完后，監(jiān)聽全局點(diǎn)擊事件

• 獲取當(dāng)前點(diǎn)擊的元素，根據(jù)需求獲取當(dāng)前元素本身的屬性

• 判斷當(dāng)前點(diǎn)擊元素與要隱藏的元素是否相同

• 當(dāng)前點(diǎn)擊元素與要隱藏的元素不相同則隱藏

4. 最終效果

接著看下vue實(shí)現(xiàn)點(diǎn)擊目標(biāo)元素外頁面的其他地方隱藏彈窗

方法：

步驟1：給頁面最外出的元素div加點(diǎn)擊事件：@click=“popShow = false”。

步驟2：給點(diǎn)擊目標(biāo)元素加點(diǎn)擊事件：@click=“popShow = true”。

備注：popShow 為控制彈窗顯示與隱藏的標(biāo)志。

PS：下面看下vue實(shí)現(xiàn)點(diǎn)擊其他地方隱藏div

方法一：　　

通過監(jiān)聽事件

document.addEventListener('click',function(e){
    if(e.target.className!='usermessage'){
     that.userClick=false;
    }
})

方法二（比較好）：

給最外層的div加個點(diǎn)擊事件 @click="userClick=false"

給點(diǎn)擊的元素上面加上：@click.stop="userClick=!userClick"

方法三：