clickaway隱藏下拉菜單VueJS

我有一個下拉菜單，它有position: absolute;我需要它，所以當用戶點擊遠離下拉菜單時，它將關閉。clickaway隱藏下拉菜單VueJS

我只是有一個showDropdown數據屬性，它是真或假。點擊按鈕是：@click="showDropdown = !showDropdown"這一切都完美。

我正在使用vue-clickaway mixin，但無法弄清楚只有在打開時才能隱藏它。

非常感謝！

2017-02-18 Benjamin Sweney

這實際上是一個多Vue的問題一個CSS問題，但你基本上可以做到以下幾點：

// component 
<div class="dropdown" :class="{ 'is-open': showDropdown }"> 
    // elements 
    <button @click="showDropdown = !showDropdown">Close Dropdown</button> 
</div> 

// css 
.dropdown { 
    position: absolute; 
    display: none; 
    // other styles 
} 

.dropdown.is-open { 
    display: block; 
}

這條線：:class="{ 'is-open': showDropdown }"應用is-open類每當showDropdown === true。 display屬性基本上顯示/隱藏菜單，不管is-open類是否存在。你可以改變這些風格以使用css轉換給出更時尚的動畫，但這是一般的前提。

來源

2017-02-19 01:31:50 K3TH3R

使用VUE-clickaway我用下面的代碼：

dropdownClickAway(e) { 
    if(this.showDropdown && e.target != this.$refs.dropdownButton) this.showDropdown = false; 
}

來源

2017-02-21 08:20:01

你應該有方法來切換下拉。

一個用於切換下拉菜單。

toggleDropdown() { 
    this.showDropdown = ! this.showDropdown 
}

另一個用於隱藏下拉菜單。

hideDropdown() { 
    this.showDropdown = false 
}

而且，像這樣使用它綁定事件（@click和v-on-clickaway）：

<button class="dropdown-toggle" @click="toggleDropdown"> . . . </button> 
// And 
<div class="dropdown" v-show="showDropdown" v-on-clickaway="hideDropdown"> . . . </div>

來源

2018-01-22 02:56:01

clickaway隱藏下拉菜單VueJS

回答

相關問題