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

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

最新評論