Vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前元素以外的地方隱藏當(dāng)前元素(實(shí)現(xiàn)思路)
1. 綁定元素
2. mounted生命周期
3. 實(shí)現(xiàn)思路
- 頁(yè)面掛載完后，監(jiān)聽(tīng)全局點(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)元素外頁(yè)面的其他地方隱藏彈窗
方法：
步驟1：給頁(yè)面最外出的元素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
方法一：
通過(guò)監(jiān)聽(tīng)事件
document.addEventListener('click',function(e){
if(e.target.className!='usermessage'){
that.userClick=false;
}
})
方法二（比較好）：
給最外層的div加個(gè)點(diǎn)擊事件 @click="userClick=false"
給點(diǎn)擊的元素上面加上：@click.stop="userClick=!userClick"
方法三：
<template>
<!--向頁(yè)面添加關(guān)閉div的事件監(jiān)聽(tīng)-->
<div class="page" @click="hide">
<!--添加.stop防止page的點(diǎn)擊事件觸發(fā)，導(dǎo)致無(wú)法顯示div-->
<button @click.stop="show">點(diǎn)擊顯示div</button>
<!--指定的div。添加.stop防止點(diǎn)擊div內(nèi)的元素時(shí)，整個(gè)div被關(guān)閉-->
<div @click.stop>
...
</div>
</div>
<template>
<script>
export default {
methods:{
show(){},
hide(){}
}
}
</script>
小結(jié)：
通過(guò)vue.js 事件的.stop修飾符可以阻止事件繼續(xù)冒泡傳播，也可以使用原生js事件的event.stopPropagation()方法。
通過(guò)向指定的div添加.stop，可以實(shí)現(xiàn)只有點(diǎn)擊非該div內(nèi)的元素時(shí)，才會(huì)往上冒泡至page，從而實(shí)現(xiàn)點(diǎn)擊其他地方隱藏div。
要向觸發(fā)顯示div的按鈕添加.stop，否則一點(diǎn)擊按鈕，觸發(fā)show()之后傳播到page，立馬就會(huì)觸發(fā)hide()，div就無(wú)法顯示。
總結(jié)
以上所述是小編給大家介紹的Vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前元素以外的地方隱藏當(dāng)前元素，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
Vue實(shí)現(xiàn)在線預(yù)覽pdf文件功能（利用pdf.js/iframe/embed）
項(xiàng)目要求需要預(yù)覽pdf文件,網(wǎng)上找了很久，發(fā)現(xiàn)pdf.js的效果,這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)在線預(yù)覽pdf文件功能,主要利用pdf.js/iframe/embed來(lái)實(shí)現(xiàn)的,需要的朋友可以參考下2021-06-06
今天小編就為大家分享一篇vue自定義全局共用函數(shù)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue中.env、.env.development及.env.production文件說(shuō)明
這篇文章主要給大家介紹了關(guān)于Vue中.env、.env.development及.env.production文件說(shuō)明的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09
vue實(shí)現(xiàn)多級(jí)側(cè)邊欄的封裝
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多級(jí)側(cè)邊欄的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue和relation-graph庫(kù)打造高質(zhì)量的關(guān)系圖應(yīng)用程序
這篇文章主要介紹了Vue和relation-graph庫(kù)打造高質(zhì)量的關(guān)系圖應(yīng)用程序,在這篇文章中,我們深入探討了如何使用Vue和relation-graph高效打造關(guān)系圖,我們?cè)敿?xì)介紹了數(shù)據(jù)準(zhǔn)備、關(guān)系映射、點(diǎn)擊事件等關(guān)鍵步驟,需要的朋友可以參考下2023-09-09
element日歷calendar組件上月、今天、下月、日歷塊點(diǎn)擊事件及模板源碼
這篇文章主要介紹了element日歷calendar組件上月、今天、下月、日歷塊點(diǎn)擊事件及模板源碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue $mount實(shí)戰(zhàn)之實(shí)現(xiàn)消息彈窗組件
這篇文章主要介紹了Vue $mount實(shí)現(xiàn)消息彈窗組件的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
vue?使用el-table循環(huán)生成表格的過(guò)程
這篇文章主要介紹了vue?使用el-table循環(huán)生成表格的過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue-Router進(jìn)階之滾動(dòng)行為詳解
本篇文章主要介紹了Vue-Router進(jìn)階之滾動(dòng)行為詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這15個(gè)Vue指令,讓你的項(xiàng)目開(kāi)發(fā)爽到爆
這篇文章主要介紹了這15個(gè)Vue指令,讓你的項(xiàng)目開(kāi)發(fā)爽到爆，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-10-10