欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在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)文章

  • 詳解VueRouter進(jìn)階之導(dǎo)航鉤子和路由元信息

    詳解VueRouter進(jìn)階之導(dǎo)航鉤子和路由元信息

    本篇文章主要介紹了詳解VueRouter進(jìn)階之導(dǎo)航鉤子和路由元信息,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-09-09
  • Vue實(shí)現(xiàn)面包屑導(dǎo)航的正確方式

    Vue實(shí)現(xiàn)面包屑導(dǎo)航的正確方式

    面包屑導(dǎo)航(BreadcrumbNavigation)這個(gè)概念來自童話故事“漢賽爾和格萊特”,它的作用是告訴訪問者他們在網(wǎng)站中的位置以及如何返回,本文為大家介紹了實(shí)現(xiàn)面包屑導(dǎo)航的正確方式,需要的可以參考一下
    2023-06-06
  • Vue中對組件二開解決思路以及方案

    Vue中對組件二開解決思路以及方案

    這篇文章主要介紹了Vue中對組件二開解決思路以及方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2023-04-04
  • 關(guān)于vue3+echart5?遇到的坑?Cannot?read?properties?of?undefined?(reading?'type')

    關(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
  • 最新評論