在vue中實(shí)現(xiàn)點(diǎn)擊選擇框阻止彈出層消失的方法
更新時(shí)間：2018年09月15日 10:33:34 作者：luckylqh
今天小編就為大家分享一篇在vue中實(shí)現(xiàn)點(diǎn)擊選擇框阻止彈出層消失的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
在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è)效果是加在父級上，所以在選擇性別的時(shí)候，也會關(guān)閉彈出層，這個(gè)問題其實(shí)是一個(gè)冒泡事件，要解決這個(gè)問題用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)擊了按鈕以后，彈出層不會顯示，這是因?yàn)樵诟讣壣显O(shè)置了checktanchuceng事件，沖突了，所以要給按鈕加上阻止冒泡的方法，改成：
<button @click.stop="unshow">toggle</button>
以上這篇在vue中實(shí)現(xiàn)點(diǎn)擊選擇框阻止彈出層消失的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中的computed?和?vm.$data?原理，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
在vue3中,?提供了一個(gè)?useAttrs?的方法它接收到的參數(shù)一?prop中可以接收到的數(shù)據(jù)是基本一樣的如果我們想自已寫一個(gè)組件,?把?elementPlus?中的期中一個(gè)組件封裝一下,這篇文章主要介紹了vue3中的useAttrs和props的區(qū)別,需要的朋友可以參考下2023-09-09
這篇文章主要給大家介紹了關(guān)于vue3.0透傳屬性和事件使用的相關(guān)資料,透傳attribute指的是傳遞給一個(gè)組件,卻沒有被該組件聲明為props或emits的attribute或者v-on事件監(jiān)聽器,需要的朋友可以參考下2024-01-01
我們通常會用到腳手架vuecli創(chuàng)建項(xiàng)目,此時(shí)需要安裝腳手架,下面這篇文章主要給大家介紹了關(guān)于vue腳手架安裝以及安裝失敗問題的解決辦法,需要的朋友可以參考下2022-07-07
使用vue進(jìn)行Lodop打印的一些常用方法小結(jié)
這篇文章主要給大家介紹了關(guān)于使用vue進(jìn)行Lodop打印的一些常用方法,需要進(jìn)行打印功能,Lodop就是實(shí)現(xiàn)需求的插件,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
詳解VueRouter進(jìn)階之導(dǎo)航鉤子和路由元信息
本篇文章主要介紹了詳解VueRouter進(jìn)階之導(dǎo)航鉤子和路由元信息，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09 
Vue實(shí)現(xiàn)面包屑導(dǎo)航的正確方式
面包屑導(dǎo)航(BreadcrumbNavigation)這個(gè)概念來自童話故事“漢賽爾和格萊特”，它的作用是告訴訪問者他們在網(wǎng)站中的位置以及如何返回，本文為大家介紹了實(shí)現(xiàn)面包屑導(dǎo)航的正確方式，需要的可以參考一下
2023-06-06 
這篇文章主要介紹了Vue中對組件二開解決思路以及方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2023-04-04 
關(guān)于vue3+echart5?遇到的坑?Cannot?read?properties?of?undefine
這篇文章主要介紹了vue3+echart5?遇到的坑?Cannot?read?properties?of?undefined?(reading?'type'),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-04-04