快捷導(dǎo)航

在vue中實(shí)現(xiàn)點(diǎn)擊選擇框阻止彈出層消失的方法

更新時(shí)間：2018年09月15日 10:33:34 作者：luckylqh

今天小編就為大家分享一篇在vue中實(shí)現(xiàn)點(diǎn)擊選擇框阻止彈出層消失的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

在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è)問題其實(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)擊了按鈕以后，彈出層不會(huì)顯示，這是因?yàn)樵诟讣?jí)上設(shè)置了checktanchuceng事件，沖突了，所以要給按鈕加上阻止冒泡的方法，改成：

<button @click.stop="unshow">toggle</button>

以上這篇在vue中實(shí)現(xiàn)點(diǎn)擊選擇框阻止彈出層消失的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解vue中在父組件點(diǎn)擊按鈕觸發(fā)子組件的事件
這篇文章主要介紹了詳解vue中在父組件點(diǎn)擊按鈕觸發(fā)子組件的事件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
一文解析Vue h函數(shù)到底是個(gè)啥
h()函數(shù)是Vue.js中的一個(gè)工具函數(shù),用于創(chuàng)建虛擬DOM節(jié)點(diǎn),具有更高的靈活性和控制力,本文介紹Vue h函數(shù)到底是個(gè)啥,感興趣的朋友一起看看吧
2025-02-02
關(guān)于.prettierrc代碼格式化配置方式
這篇文章主要介紹了關(guān)于.prettierrc代碼格式化配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue過濾器實(shí)現(xiàn)日期格式化的案例分析
這篇文章主要介紹了vue過濾器實(shí)現(xiàn)日期格式化的案例分析，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-07-07
基于Vue3自定義實(shí)現(xiàn)圖片翻轉(zhuǎn)預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3自定義實(shí)現(xiàn)簡(jiǎn)單的圖片翻轉(zhuǎn)預(yù)覽功能,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,有需要的小伙伴可以參考一下
2023-10-10
vueScroll實(shí)現(xiàn)移動(dòng)端下拉刷新、上拉加載
這篇文章主要介紹了vueScroll實(shí)現(xiàn)移動(dòng)端下拉刷新、上拉加載，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
vue的過濾器filter實(shí)例詳解
本文通過實(shí)例代碼給大家介紹了vue的過濾器filter的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-09-09
vue實(shí)現(xiàn)簡(jiǎn)單滑塊驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單滑塊驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
Vue組件全局注冊(cè)實(shí)現(xiàn)警告框的實(shí)例詳解
這篇文章主要介紹了Vue組件全局注冊(cè)實(shí)現(xiàn)警告框的實(shí)例,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-06-06
Vue3?Composition?API優(yōu)雅封裝第三方組件實(shí)例
這篇文章主要為大家介紹了Vue3?Composition?API優(yōu)雅封裝第三方組件實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07