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

1. 綁定元素

2. mounted生命周期

3. 實現(xiàn)思路
頁面掛載完后,監(jiān)聽全局點擊事件
獲取當前點擊的元素,根據(jù)需求獲取當前元素本身的屬性
判斷當前點擊元素與要隱藏的元素是否相同
當前點擊元素與要隱藏的元素不相同則隱藏
4. 最終效果

接著看下vue實現(xiàn)點擊目標元素外頁面的其他地方隱藏彈窗
方法:
步驟1:給頁面最外出的元素div加點擊事件:@click=“popShow = false”。
步驟2:給點擊目標元素加點擊事件:@click=“popShow = true”。
備注:popShow 為控制彈窗顯示與隱藏的標志。
PS:下面看下vue實現(xiàn)點擊其他地方隱藏div
方法一:
通過監(jiān)聽事件
document.addEventListener('click',function(e){
if(e.target.className!='usermessage'){
that.userClick=false;
}
})方法二(比較好):
給最外層的div加個點擊事件 @click="userClick=false"
給點擊的元素上面加上:@click.stop="userClick=!userClick"
方法三:
<template>
<!--向頁面添加關(guān)閉div的事件監(jiān)聽-->
<div class="page" @click="hide">
<!--添加.stop防止page的點擊事件觸發(fā),導(dǎo)致無法顯示div-->
<button @click.stop="show">點擊顯示div</button>
<!--指定的div。添加.stop防止點擊div內(nèi)的元素時,整個div被關(guān)閉-->
<div @click.stop>
...
</div>
</div>
<template>
<script>
export default {
methods:{
show(){},
hide(){}
}
}
</script>小結(jié):
通過vue.js 事件的.stop修飾符可以阻止事件繼續(xù)冒泡傳播,也可以使用原生js事件的event.stopPropagation()方法。
通過向指定的div添加.stop,可以實現(xiàn)只有點擊非該div內(nèi)的元素時,才會往上冒泡至page,從而實現(xiàn)點擊其他地方隱藏div。
要向觸發(fā)顯示div的按鈕添加.stop,否則一點擊按鈕,觸發(fā)show()之后傳播到page,立馬就會觸發(fā)hide(),div就無法顯示。
以上是“Vue怎么實現(xiàn)點擊當前元素以外的地方隱藏當前元素”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
文章題目:Vue怎么實現(xiàn)點擊當前元素以外的地方隱藏當前元素-創(chuàng)新互聯(lián)
當前路徑:http://www.chinadenli.net/article36/djohsg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制開發(fā)、網(wǎng)站收錄、用戶體驗、服務(wù)器托管、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站設(shè)計
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容