您好,登錄后才能下訂單哦!
本篇文章為大家展示了vuejs怎么隱藏當(dāng)前元素,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
vuejs隱藏當(dāng)前元素的實現(xiàn)方法:1、在頁面掛載完后,監(jiān)聽全局點擊事件;2、獲取當(dāng)前點擊的元素,根據(jù)需求獲取當(dāng)前元素本身的屬性;3、判斷當(dāng)前點擊元素與要隱藏的元素是否相同;4、當(dāng)前點擊元素與要隱藏的元素不相同則隱藏。
本文操作環(huán)境:Windows7系統(tǒng)、vue2.9.6版,DELL G3電腦。
vuejs怎么隱藏當(dāng)前元素?
Vue實現(xiàn)點擊當(dāng)前元素以外的地方隱藏當(dāng)前元素(實現(xiàn)思路)
1. 綁定元素
2. mounted生命周期
3. 實現(xiàn)思路
頁面掛載完后,監(jiān)聽全局點擊事件
獲取當(dāng)前點擊的元素,根據(jù)需求獲取當(dāng)前元素本身的屬性
判斷當(dāng)前點擊元素與要隱藏的元素是否相同
當(dāng)前點擊元素與要隱藏的元素不相同則隱藏
4. 最終效果
接著看下vue實現(xiàn)點擊目標(biāo)元素外頁面的其他地方隱藏彈窗
方法:
步驟1:給頁面最外出的元素p加點擊事件:@click=“popShow = false”
。
步驟2:給點擊目標(biāo)元素加點擊事件:@click=“popShow = true”
。
備注:popShow 為控制彈窗顯示與隱藏的標(biāo)志。
PS:下面看下vue實現(xiàn)點擊其他地方隱藏p
方法一:
通過監(jiān)聽事件
document.addEventListener('click',function(e){ if(e.target.className!='usermessage'){ that.userClick=false; } })
方法二(比較好):
給最外層的p加個點擊事件 @click="userClick=false"
給點擊的元素上面加上:@click.stop="userClick=!userClick"
方法三:
<template> <!--向頁面添加關(guān)閉p的事件監(jiān)聽--> <p class="page" @click="hide"> <!--添加.stop防止page的點擊事件觸發(fā),導(dǎo)致無法顯示p--> <button @click.stop="show">點擊顯示p</button> <!--指定的p。添加.stop防止點擊p內(nèi)的元素時,整個p被關(guān)閉--> <p @click.stop> ... </p> </p> <template> <script> export default { methods:{ show(){}, hide(){} } } </script>
小結(jié):
通過vue.js 事件的.stop修飾符可以阻止事件繼續(xù)冒泡傳播,也可以使用原生js事件的event.stopPropagation()方法。
通過向指定的p添加.stop,可以實現(xiàn)只有點擊非該p內(nèi)的元素時,才會往上冒泡至page,從而實現(xiàn)點擊其他地方隱藏p。
要向觸發(fā)顯示p的按鈕添加.stop,否則一點擊按鈕,觸發(fā)show()之后傳播到page,立馬就會觸發(fā)hide(),p就無法顯示。
上述內(nèi)容就是vuejs怎么隱藏當(dāng)前元素,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。