在vue項(xiàng)目中,選擇性別是用的一個(gè)彈出層,
<div class="sex" v-show="showed" transition='fade' @click="unshow"> <ul @click.stop="stophidden"> <li class="choice">選擇</li> <li> <label>男</label> <input type="radio" name="sex" value="男"> </li> <li> <label>女</label> <input type="radio" name="sex" value="女"> </li> </ul> </div>
已經(jīng)給這個(gè).sex層綁定了一個(gè)v-show條件,實(shí)現(xiàn)了點(diǎn)擊顯示隱藏的效果
但是因?yàn)檫@個(gè)效果是加在父級(jí)上,所以在選擇性別的時(shí)候,也會(huì)關(guān)閉彈出層,這個(gè)問(wèn)題其實(shí)是一個(gè)冒泡事件,要解決這個(gè)問(wèn)題用vue的阻止冒泡的屬性stop即可
<ul @click.stop="stophidden">
這個(gè)方法不寫也可以,或者寫成
<ul @click.stop="">
除了這個(gè)地方以外,還有一個(gè)彈出層,需要點(diǎn)擊彈出層以外的地方關(guān)閉這個(gè)彈出層,如圖:
如:
<div class="collect" @click="checktanchuceng"> <button @click="unshow">toggle</button> <div class="tachuceng" v-show="showed"> </div> </div> <script> export default { data (){ return { showed:false } }, methods:{ checktanchuceng (){ if(this.showed=true){ this.showed=false; } }, unshow(){ this.showed=!this.showed } } } </script>
這種情況下點(diǎn)擊了按鈕以后,彈出層不會(huì)顯示,這是因?yàn)樵诟讣?jí)上設(shè)置了checktanchuceng事件,沖突了,所以要給按鈕加上阻止冒泡的方法,改成:
<button @click.stop="unshow">toggle</button>
以上這篇在vue中實(shí)現(xiàn)點(diǎn)擊選擇框阻止彈出層消失的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com