在vue中實現(xiàn)點擊選擇框阻止彈出層消失的方法
更新時間：2018年09月15日 10:33:34 作者：luckylqh
今天小編就為大家分享一篇在vue中實現(xiàn)點擊選擇框阻止彈出層消失的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在vue項目中，選擇性別是用的一個彈出層，
<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)給這個.sex層綁定了一個v-show條件，實現(xiàn)了點擊顯示隱藏的效果
但是因為這個效果是加在父級上，所以在選擇性別的時候，也會關(guān)閉彈出層，這個問題其實是一個冒泡事件，要解決這個問題用vue的阻止冒泡的屬性stop即可
<ul @click.stop="stophidden">
這個方法不寫也可以，或者寫成
<ul @click.stop="">
除了這個地方以外，還有一個彈出層，需要點擊彈出層以外的地方關(guān)閉這個彈出層，如圖：
如：
<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>
這種情況下點擊了按鈕以后，彈出層不會顯示，這是因為在父級上設(shè)置了checktanchuceng事件，沖突了，所以要給按鈕加上阻止冒泡的方法，改成：
<button @click.stop="unshow">toggle</button>
以上這篇在vue中實現(xiàn)點擊選擇框阻止彈出層消失的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解vue中在父組件點擊按鈕觸發(fā)子組件的事件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
h()函數(shù)是Vue.js中的一個工具函數(shù),用于創(chuàng)建虛擬DOM節(jié)點,具有更高的靈活性和控制力,本文介紹Vue h函數(shù)到底是個啥,感興趣的朋友一起看看吧2025-02-02
這篇文章主要介紹了關(guān)于.prettierrc代碼格式化配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue過濾器實現(xiàn)日期格式化的案例分析，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
基于Vue3自定義實現(xiàn)圖片翻轉(zhuǎn)預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3自定義實現(xiàn)簡單的圖片翻轉(zhuǎn)預(yù)覽功能,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價值,有需要的小伙伴可以參考一下2023-10-10
這篇文章主要介紹了vueScroll實現(xiàn)移動端下拉刷新、上拉加載，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
本文通過實例代碼給大家介紹了vue的過濾器filter的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)簡單滑塊驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了Vue組件全局注冊實現(xiàn)警告框的實例,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
Vue3?Composition?API優(yōu)雅封裝第三方組件實例
這篇文章主要為大家介紹了Vue3?Composition?API優(yōu)雅封裝第三方組件實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07